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.
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.
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.
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).
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.
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. 😅
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)
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!
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 !
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)
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
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.
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.
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)
Really awesome! I think the reason why I find it difficult to watch those long tailwindcss tutorial is what you mentioned here. What people need to understand and spend a little more time is setting a design system for a project. Could you please do a video on that?
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)
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.
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... 😉
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 ❤
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.
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.
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.
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 🤝
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.
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
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.
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.
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.
Thanks, Kyle. I know CSS, Bootstrap, and a few other UI frameworks, but I recently started coding with React/next.js and am looking to learn Tailwind. But goddamn, the help videos are crazy long.
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???
Super helpful advice bro. Thank you very much. I didn't know that I knew like 95% of Tailwind while never having written a single line of it? WhaTTTT! 😍
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.
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 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
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.
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.
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.
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.
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.
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?
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
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.
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.
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.
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
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.
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'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?
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
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 learnt vanilla CSS a lot faster by using Tailwind than I ever did by using vanilla CSS. You work so much more efficiently with Tailwind,and the things you do are practically 1:1 so it makes sense, but it sounds weird if you don't think about it.
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
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?
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.
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%!
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).
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?
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.
@@jpanPirate 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)
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!
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 !
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)
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 👌
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.
This is so true Kyle. I personally prefer bootstrap and apply custom styling afterward to make a unique design but the same rules apply.
Thanks, I was dreading learning yet another framework but you alleviated that anxiety. I will just search the docs like you said.
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)
Nope now you stll as bad as before, but using TW utility classes
Really awesome! I think the reason why I find it difficult to watch those long tailwindcss tutorial is what you mentioned here. What people need to understand and spend a little more time is setting a design system for a project. Could you please do a video on that?
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)
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.
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... 😉
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 ❤
I was actually about to watch that 4hrs course until i scrolled down and saw your vid.....You're a genius!
Been planning to watch 4 hours course. Thanks for saving my time!
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.
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.
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.
I was watching a video on tailwind CSS and felt like I was wasting my time, then I saw ur video in the recommendation. I couldn't agree more.
Heard this guy making a youtube video about master CSS not tailwind and boom now we have a tutorial
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 🤝
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.
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
Thank you so much for saving me many hours, bro!!! 👍 You are absolutely right, reading the docs is the best approach BY FAR
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.
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.
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.
Thank you! Stand-out content creator. Your cadence and knowledge is perfect.
Thanks, Kyle. I know CSS, Bootstrap, and a few other UI frameworks, but I recently started coding with React/next.js and am looking to learn Tailwind. But goddamn, the help videos are crazy long.
amazing man. thank you i actually didnt get time to go through so long videos. you really simplified it.
Great job. There are only a few, who has a courage to state that "King is naked". Bravo.
Thank you for saving 4 hours of my time with a 8-minute video 🎉😊 Awesome job
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???
Super helpful advice bro. Thank you very much. I didn't know that I knew like 95% of Tailwind while never having written a single line of it? WhaTTTT! 😍
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
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.
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 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
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... 😉
It's the best and shortest tailwind CSS tutorial on TH-cam!
Really appreciate your efforts. You are guiding people to save their most precious thing "Time".
🐐 This is you. You are the GOAT. Greatest of all time.
Hehe, that's how I mastered Bootstrap but I forgot about the strategy when it came to Tailwind, thank you so much!
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.
You are making everything look easy!❤
Kudos to you, you really simplified my web dev learning so far.
Thanks so much for this info Kyle..i think I'm gonna gain a lot of time✨
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.
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.
Boom 7 mins tailwind done😇. Man you are like god, Thank you.
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.
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.
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?
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
Thank you for this...
I was actually taking a course for tailwind
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.
TailwindCSS docs are so easy to understand. Found out about tailwind randomly and got the hang of it really quickly.
Thanks man. You saved me SO MUCH time and energy!
video was so good I tried to subscribe but realized I was already subscribed
Can you make a video on "Material UI" in the same way
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)
Please if I follow the docs to install I find issues. please do a vid on installation
I've been using tailwind for over 2 years and I finally learned peer. It's used to customize input "placeholders".
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.
Great vid. Also, sick jackson!
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.
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%!
I have almost 1 year of experience learning css so I'll follow the tailwind docs briefly
I completely agree. I never learned any tailwind course before. I just read tailwind's docs. And then code and code
I'm absolutely agree with you. css is basic knowladge, freamworks might change everytime, they based on css.
Thank you, Kyle, for taking the time to show us the best way to learn Tailwind CSS. Your efforts are greatly appreciated.
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
I started tailwind without knowing css 😅. And for this approach I watch a walkthrough and one project video.
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 .
Thanks Kyle as always! 👍
Tailwind and Bootstrap5, which one is better?
Very nice video! Thanks for the approach and method to search and learn, very usefull no only for Tildwind
*Watches and follows tailwind tutorial and understands it*
TH-cam home screen: "Watching tailwind tutorials is a waste of time"
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?
Thanks a lot for this video! It helps save a lot of time.
What about react?
Do I need a 48h course?
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
that tailwind intellisense is super useful. Thank you so much!
Thank God I saw this 😂 I already started the 4 hours tutorial meanwhile I understand css perfectly already
i was about to watch tutorials , thanks for saving my time mate
wow so i started learning tailwind yesterday and i have a video by wds today.. amazing😍
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.
A tutorial of how to actually create your css layout would be good.
(Where properties should be, in what order and why)
An awesome video but, how do you get the vs code tailwind css extension to autocomplete??, im stuck with it :(
i want to learn css framework which one you recomment Tailwind or bootstrap.
Wait there's an other css framework other than bootstrap ?
I learnt vanilla CSS a lot faster by using Tailwind than I ever did by using vanilla CSS.
You work so much more efficiently with Tailwind,and the things you do are practically 1:1 so it makes sense, but it sounds weird if you don't think about it.
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
Great Tailwind tutorial, WDS! 😜