Watching Tailwind Tutorials Is A Waste Of Time
ฝัง
- เผยแพร่เมื่อ 10 มิ.ย. 2024
- Learn CSS Today Course: courses.webdevsimplified.com/...
I love Tailwind. It is one of (if not) my favorite ways to style applications. I do have one issue with Tailwind, though, and that is how people go about learning it. In order to truly learn and master Tailwind you do not need to actually learn much at all about Tailwind. Instead you need to master CSS since Tailwind is really just CSS with some slightly different names and a few extra features.
📚 Materials/References:
Learn CSS Today Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:24 - Best way to learn Tailwind
04:28 - How to learn advanced Tailwind
#TailwindCSS #WDS #CSS
It’s worth noting that, while it’s not bad to learn Tailwind first per se, it’s generally _best_ to ensure you still always learn the basics _regardless_ of if you also learn something like Tailwind first. I say this because, as a web developer of >20yrs, my CSS knowledge has only grown and has always been useful over time. But, over that same time, various frameworks have come in and out of style. That said, I’m sure Tailwind may stick around for awhile, it’s just general advice so take that as you will. 😅
I agree with you is better to learn the fundamentals of CSS.
Having to add 800 classes to every markup tag is fundamentally not an efficient thing to be doing. This fad will pass and be forgotten.
@@elidvenega3017 jap always learn the core tech first. Html, css and JS and then libraries and then frameworks.
True, but unfortunately when I learnt react, then next from TH-cam there wasn't anything like CSS or Sass barring a handful tutes. Had to learn tailwind, styled components etc
@IridiumZero I know... it's weird because way back at the beginning we all used copious amounts of inline styles using each tag's "style" attribute. Then we moved to a style block at the top of the document. Then an external style sheet, and now we back round to copious guff at a tag level (plus external style sheet)
I only learned about tailwind when I was having a look at nextjs and tailwind was integrated in the example project. I was somewhat shocked how easy it was to use with just some basic knowledge in css. Once you understand the basic structure (which doesn't require much more effort than just looking up a few things in the documentation), you can pretty much guess what classes you need.
The only part I'm having a bit of a struggle with is the typography-plugin, but I'm not sure, I may be using it wrong.
(Also, small side note: Don't try to use the documentation in Safari)
Agree 100%. Used a tutorial to try and learn Tailwind a few months back and stopped after an hour. Tailwind Intellisense and the docs are all you need (Headwind is nice too).
when i started, my approach to plain css was the inline style attribute to see the results on the fly while testing. imagine my surprise when i discovered that tailwind did something similar, but in a much more concise and consistent way.
it was the easiest switch and i really never looked back
(well, you should know css anyway bc of how many guides and tutorial are out there. you just have to reimplement them in your project using tailwind, and that's pretty easy to do)
Thank you!!! I've been thinking about getting started with Tailwind but the 4hours videos are pretty overwhelming and are sometimes not so useful when you're in a specific situation that's not introduced on the video.
The way you presented things made so much sense and it feels a lot more manageable to learn to work with Tailwind now, so you might have saved me many hours of work !
It took me awhile to learn tailwind because I thought needed to learn much stuff but when I dived into the docs, I was able to learn tailwind so fast while implementing it on a project. So, I agree. If you know CSS well then you know tailwind well.
Tailwind was great but now it's time to move on
@@DeepTitanic what do you mean by moving on?
The Tailwind documentation is fantastic. I learned a lot about both Tailwind and CSS just by reading it while using it. I never looked at any tutorial.
Please could you Provide me with the link of that documentation bro?
Thanks Kyle. The thing that often gets overlooked about Tailwind is the underlying design system. Using a framework such as Svelte, where you get to write scoped semantic CSS for each component-and therefore don't need to waste time coming up with tons of class names and all the BEM malarkey-makes Tailwind's utility classes unnecessary, assuming you already know how to write CSS. However, the benefit gained from using Tailwind is its design system. Many devs are not UI designers and so Tailwind can really help out if that's not your forte. Unless you already have your own custom components, Tailwind's design system can be a big help when it comes to building mock-ups and prototypes that look professional.
Yes, we should only take a day to watch tutorial, in the tutorial we should focus on how things are setup and how to customize it. The classes are nearly indentical to CSS properties, so after that we should only rely on the documentation and articles. I actually watched an hour on tailwind course and built a simple responsive landing page on my own. It nearly took me a week, but it was worth the time, I didn't have to memorize the class names, we will easily get used to it and remember the names as we built more projects by relying on the documentation. Also its like learning CSS and a library at the same time.
Really amazing !
The way you show that css is the important thing and tailwind is so easy to master it by starting just with the documentation is really cool and helpfull
Thank you so much 🤝
This is so true Kyle. I personally prefer bootstrap and apply custom styling afterward to make a unique design but the same rules apply.
Great educational video as usual. By the way, why is using Tailwind via CDN is for development purposes only and not best for production according to the documentation?
amazing man. thank you i actually didnt get time to go through so long videos. you really simplified it.
You are right, Kyle. This documentation is very helpful. Before we start using this CSS framework, we need to study and comprehend the documentation well.
It's what Ii thought with all CSS frameworks. Once I learned vanilla CSS and grassped what Bootstrap is for the first time, I started checking all other frameworks as well. Realisation came to me that once you know how to use one, you know all of them, it's just matter of having docs ready when you need them.
Investing those hours into learning the fundamentals of CSS is way better than diving straight to a CSS framework like Tailwind, Bootstrap, Material etc. I find that these frameworks are too invested in manipulating a single div or button and they don't tell us how to manipulate alternating rows of a table or arrange buttons in a grid evenly.
Another thing is frameworks come and go easily like a passing trend. It used to be Bootstrap that was on top, then it was MaterialUI, after that Tailwind and now some people are either into styled components (which require a strong knowledge of CSS) or frameworks of frameworks like DaisyUI which is a framework of Tailwind. Since these trends evolve so quickly it's better to master CSS first then just use the docs of whatever framework of your choice.
Because mastering html and css would make you too powerful.
We have to abstract everything behind a blackbox framework to keep development mysterious and frustrating
I 100% approve this advice. I learned pure CSS first and when I decided to jump to Tailwind it was as simple as searching in the docs the equivalent in CSS.
Yes, 100%!
Before I use Tailwind, my CSS skill is basic. Now I'm advanced in CSS through Tailwind because there are bunch of CSS property that I learnt when I'm using it practically. Plus, for beginner it's easier to learn CSS through Tailwind than CSS itself, for example CSS grid, it will be overwhelming for beginner seeing CSS grid property and syntax, but with Tailwind it's as easy as "grid grid-cols-2 gap-4". Up until this point, I don't have any reason to leave Tailwind to vanilla CSS, because the time amount to code just in element class is much less than thinking about naming CSS semantic class name, then moving to CSS file, write a bunch of lines, and move it back, and so on. There is no limitation in Tailwind since you can just use arbitrary value and even arbitrary property, and you can just extend with vanilla CSS and use Sass if you want. Using Tailwind has no cons at all, change my mind.
Exactly. I also learned css while doing stuff with tailwind and checking the doc and sometimes filling in from CSS docs.
I love tailwind & it's my first choice for solo projects but when more developers become involved it becomes somewhat hard to debug the code and know which classes belong to which part of the code etc. You could just divide code into more components for easier debugging, but at that point you start losing 1 of tailwind's benefits as now you have to think of a name for the component.
It's fantastic for speedy development, not very good for refactoring especially in a group environment.
i used inline styling for testing and when i discovered that you can do a much cleaner, concise and consistent work with tailwind, it was the easiest switch for me and i never looked back again
(but i still find guides and tutorials in css bc there is so much of it out there. that said, one of the best features of tailwind is how easily you can reimplement/adapt css to it)
Thank you!!! Few years ago, between you and other people in my life and on the internet, know the basics and the rest will follow, it's finally coming to fruition
Thanks K for showing people how to learn - how to learn something is more important than just learning by any which means and puffing your time away on length tutorials with so much distraction already around
You are very correct. I started learning tailwind via Intellisense and the docs and, if you have good firm grasp on the css fundamentals, it literally is a waste of time to learn tailwind via tutorial resources.
Thank you so much for saving me many hours, bro!!! 👍 You are absolutely right, reading the docs is the best approach BY FAR
Im a total noob and I love tailwind css docs, it so easy to navigate and read. Even when im just writing full css if I forgot something i prefer to use tailwind docs instead of mdn, i only use that one when I need help with more complex stuff. I think best way to learn tailwind is to make a single page with dark mode and custom colors that way you learn to tweak the config.
Been planning to watch 4 hours course. Thanks for saving my time!
thankyou for this, i've only ever used basic pure css and wanted to learn tailwind, like u said the length of tutorials immediately puts me off, im glad there's a shorter way of learning it. from what i see, tailwind is kinda like inline css then right? u just write it inside the html class, it does look simple, only the different property names might take a bit to get used to and recognize
I literally learnt more in this video than other tutorials or guides showing how to use TailwindCSS. I know that's kinda the point, but wow, it really surprised me.
You are making everything look easy!❤
I want to add something about the crash courses, it can be used to learn how different people use Tailwind. Checking out the codes of other people can also teach us the proper/different ways of using things.
It's true that you need to learn and be better at CSS first. Otherwise it will be difficult even someone goes through a lot of tutorials. If the concept is not clear and if we don't understand what people are writing and why they are writing the codes in that way it's meaningless.
thank you for these info, I planned to learn Tailwind by taking a course, but after this video, it's so logical for me that just i need to learn how to install and the 5% you said
I will post a short crash course on Tailwind CSS next week on my channel, if you are interested... 😉
I already posted the video - this should be exactly what you are looking for ... 😉
@@lukas.webdev it's on time 👌
Yo dude you saved me, My friend told Tailwind let's u customise stuff, lot than bootstrap. So when I started to search for Tailwind tutorials, I saw this video 3rd and I always knew u have a good point. Thanks ❤
To be honest, back then I started to watch the project using Tailwind on it. I felt overwhelm not to understand what's all about because I don't have my CSS Basic understanding. So I step back to learn about the behavior of CSS (also Grid layout & Flexbox), now it's really easy to understand about what to write with Tailwind CSS just reading their Documentation
Yep. I would 100% recommend people to start writing pure CSS themselves before using frameworks.
Or at the very least use micro CSS libraries, like Pure CSS, or Pico CSS.
Yea if you know CSS, Tailwind is beyond easy and useful.
Edit: I disagree about watching the video, some people learn differently. Jumping into the doc can be a major waste of time. Whereas if you have a general map of where to find things in the docs beforehand it makes using it easier.
Yeah I’m a video learner. Thing about css styles is that there are too many settings that I don’t even know about. By watching a video, I also learn about new css properties I haven’t used before. As you said, everyone has their preferences and that’s fine.
Oh, this was an ad for your ~12.3h 60$ css course, of course! But I get your point, and it's a fair one! Learn CSS first and you'll almost master tailwind by proxy. Good video explaining it!
I was about to watch tailwind CSS today but your suggestion makes a sense..so I'll go through the documentation and install tailwind CSS intelligence today...thank you so much
Totally agree I've tried to watch some tailwind tutorials but after a while I try to brute force it and turn out well css is still css you apply tailwind utility you css-ing lol also huge credit for the tailwind vscode extension.
Very nice video! Thanks for the approach and method to search and learn, very usefull no only for Tildwind
Thanks Kyle as always! 👍
Thank you for this...
I was actually taking a course for tailwind
I never understood the point of creating classes for standard margins or colors since they can be written just as easily with inline styles. However, it makes sense to use classes for repeating elements or groups of elements such as dropdown menus or tables. But what’s the point of writing ‘black’ instead of ‘color: black’? Does it really save THAT much time???
I found the same. We need good command on CSS first, then tailwind will be very easy. I also agree that we don't need to spend much time watching tutorials, what we need is giving a try immediately. To start initially it needs only to check very few documentations, as shown in this video. In fact, Tailwind is not that much complicated for them who knows CSS well.
An awesome video but, how do you get the vs code tailwind css extension to autocomplete??, im stuck with it :(
thanks for the advice! there are a lot of libs or frameworks which documentations are pretty good and it's more worthwhile reading them than seeing any tutorial.
I've never used any library or framework when it comes to styling before...I just write pure css, is it necessary to learn or use this css framework and if so...why?
that tailwind intellisense is super useful. Thank you so much!
Bro you just saved me so... much time, I can't compare myself to other developers but I'd say I know my way around css and I was about taking dave gray 3 hours tailwind course
can anyone pls help me . i install tailwind on my new vite project and it has vulnerability on yaml module . i try anything it it still has vulnerability .
I love tailwind, it's easy to format and position the content where you want, and most importantly, doing it fast.
That with headless ui is the perfect combo.
i want to learn css framework which one you recomment Tailwind or bootstrap.
Can you make a video on "Material UI" in the same way
Thanks so much for this info Kyle..i think I'm gonna gain a lot of time✨
The docs itself is soo good, that I use it to search up any everyday css things (like place-items or so, just in case I forget it)
I was actually about to watch that 4hrs course until i scrolled down and saw your vid.....You're a genius!
I would say. The best thing to do is first learn basic vanilla css. Then use tailwind i learned it in one day. Just read through the tailwind css guide/documentation you would see all the available tailwind css shorthand styling. Its also really make your reaponsiveness super duper fast. I started this Tuesday and i can do everything i do on basic css now. Just very little css properties are missing in tailwind so you still need. Vanilla css
Yes, 100%!
BTW: I just posted 2 short videos about tailwind, that will help you learn it or get good in it even faster then by using the official docs... 😉
Great vid. Also, sick jackson!
What do you use for React intellisense/autocomplete?
TailwindCSS docs are so easy to understand. Found out about tailwind randomly and got the hang of it really quickly.
Thank you, Kyle, for taking the time to show us the best way to learn Tailwind CSS. Your efforts are greatly appreciated.
Great advice! Thank you
Thanks kyle.i was just starting tailwind CSS but you saved my time.
Thanks
I just posted 2 short videos on Tailwind CSS, that will help you get better faster then by only using the official docs... 😉
Some people advising to learn css through tailwind. No don't do that. It's just like learning javascript through react. It'll help you get around small projects once complicated stuff comes up you'll be asking for someone to do that for you. Master the fundamentals and then go to frameworks you'll be at much better position.
amazing man thanks a lot for this video. really helps
I learned both CSS and TailwindCSS, but when I learn and read TailwindCSC documentation, I more understand about styling concept like spacing, sizing, typography, color, background, layouting, flex, and grid also by implementing TailwindCSS more quickly instead using CSS.
Thank you for saving 4 hours of my time with a 8-minute video 🎉😊 Awesome job
tailwind feels like inline styles as classes. i get the appeal, but i can't seem to get past the class soup it tends to create. of course, maybe that's just my hangup and not actually a real problem.
i could see it being really powerful with sass' @extend though. you could use only your classes with tailwind doing some of the heavy lifting for sensible defaults and you wouldn't have the overhead of including the entire tailwind framework.
this answers lots of my questions thanks, couldnt find info on google - no irony
My biggest issue was learning how to implement Tailwind with an existing VIte project using React. This coupled with the video explaining Tailwind in 100 seconds really helps a ton.
A tutorial of how to actually create your css layout would be good.
(Where properties should be, in what order and why)
What about react?
Do I need a 48h course?
I've learned tailwind pretty quick. The way I learned it was by watching only one video of React project where tailwind has been used. Then I started to use it for my very first project after that with a little help of intellisense and tailwind cheat sheet. After a day or two I was really confident using it.
Building a project is the best way to learn.
Which video? Can you please share the link
any good CSS tutorial that you recommend?
Brilliant! Thank you man
Thank you! You really save me.
I learned Css 3 three times than I came to tailwind it is very easy and joyful my advice is you must use tailwind but before learn css very well then come to tailwind it will make your coding life much easier
100%!
Hey bro, do I really need to learn tailwind as front end developer to get a job?
I've been using tailwind for over 2 years and I finally learned peer. It's used to customize input "placeholders".
from where we should have to learn css?
So true. Some of them explain you 10 ways to colorise text to explain each 10 classes like 100, 200, 300 etc. and for me I enjoy tailwind but only because I learned css before.
video was so good I tried to subscribe but realized I was already subscribed
wow so i started learning tailwind yesterday and i have a video by wds today.. amazing😍
I completely agree. I never learned any tailwind course before. I just read tailwind's docs. And then code and code
Where do I learns css?, I think I know but I don't know how to start a project, I think i'm failing on html xd
I have almost 1 year of experience learning css so I'll follow the tailwind docs briefly
I actually think the complete opposite. Learn tailwindCSS and constantly check through Intellisense what it translates to in real CSS. I've learned a lot that way and only had to learn CSS Position and the Grid/Flex inner child positioning after that (they will usually be default to stretch, so learn the aligns and justifies to control their positioning behavior). TailwindCSS already applies all best practices so you can start using the best properties of CSS right off the gate.
EDIT: the video actually doesn't want you to not learn TailwindCSS, it just prefers that you don't do it through tutorials and instead learn by crafting. I feel very baited by the title and the first few seconds of the video. I still think that tutorials are important to fill your knowledge gaps. Intellisense won't help you adding CSS properties you don't even know that exist.
I'm absolutely agree with you. css is basic knowladge, freamworks might change everytime, they based on css.
Tailwind and Bootstrap5, which one is better?
CSS clicked for me in a way, only after I used Tailwind because it was much easier in a way for me to get the layout I want. Later I transitioned away from it, but I would use it if I have the option in a project. I agree that the docs are enough, but I am pretty sure that doesn't make courses obsolete... 4 hours course can be great and can provide immense value or it can be a giant pain the ass and boring, but that depend on who is teaching, not on the subject, so I dont think its a good idea to say "you dont need these courses", unless one has already really been through them. If we accept that then we can say the same for basically any tool out there that has a documentation and also courses.
I started tailwind today only and instructor also said to do from docs if u know css😅
I have a two short tutorials on tailwind, that help you learn the basics faster... 😉
bro, that is a great video, thank you, I was about to waste time watching hours of video and within 10 minutes I am up and running, thanks
I think the real issue before tailwind was there was lot of back and forth between writing CSS classes and what to use SAAS or Plain CSS and that too comes with lot of vendor related fixes. The end result was someone who is trying to learn CSS was focusing on this gochas rather than actual CSS and eventually just get tired of it. The most demotivating factor for some really good developers(mostly backend devs who were trying for CSS) was doesn't matter how hard they try without designers their page looks horrible due to wrong color selection and lots of other factors. Tailwind changed everything. All of sudden devs were focusing on writing classes and seeing at least reasonably beautiful result due to all right default settings setup by tailwind. I don't see anything wrong learning Tailwind first. In fact Tailwind was the thing that made me understand CSS very well as I was able to play around various things like Flexbox, Grid etc very quickly. Plus practically VS code Tailwind intelligence plug-in also displays underlying actual CSS for tailwind utility classes. Being a senior backend dev I find Tailwind is the best way to learn CSS.
helpful information. thanks
Great Tailwind tutorial, WDS! 😜
I learned CSS long before frameworks started to appear. So I've had it difficult to let go of old habits and adopt a framwork. Of course, a job can force you to know a framework, but I'm basically a backend dev.
i never watched i tailwind tutorial i only learn from the Docs there docs is so easy
Why not just learn the css and put it into your own classes, like Kyle shows us how to do. It's the best way. Stay DRY, it's ok to say no to tailwind css. 😊
I am learning css and I want to learn it substantially.
as FE developer for 6 years, i can confirm that learning CSS as the goal is best way to do
tailwind css is just kinda like alias to write css by using its utility classes, plus perks, like purging unused css automatically
I think this is true for any library and/or framework. Way better to learn the original language and fully understand how a language functions before you dive into libraries.
🐐 This is you. You are the GOAT. Greatest of all time.
This has come at a perfect time. It's true, Tailwind CSS documentation is pretty easy to understand
Bootstrap Vs tailwind which is better
what about learning CSS? Do we need to spend 2-3 hours time to learn that or should we read documentation instead?
Start off with The Odin Project or FreeCodeCamp's curriculum for learning CSS. Those are the two that have done the best for me, although The Odin Project is far less hand holding, I think they have the best curriculum.
I learned by just doing. Just work on a project. It's better to learn on a need basis. There are certain patterns that are used all the time in CSS and so simply working on real projects will force you to learn them. I also like to visit websites I think are styled nicely and inspect their css to see how they achieved certain things.