Should You Use Tailwind CSS? 

First project I got autonomy over I both introduced React and Tailwind CSS to our tech stack. I had little to no experience with both, and after a few months I can say I’d gladly work with both again in a heartbeat. I was always fairly good with CSS, so that helped

Bro you're like Google. You just drop the thing I'm thinking about and always at the right time.

I really like your videos. I remember when I started programming in NodeJS. I was thinking of zoom/discord clone for school (by using WebRTC or smth) so they don't have to use bad optimalized microsoft teams. Recently I watched your video about login/register page in nodejs. That all helped me to learn nodejs a lot. Thanks for your great videos, i wish you more subscribers.

The timing couldn't be better, I literally just started looking into Tailwind tonight!

I built my last react project with tailwind and once I got used to it, I found it fantastic. So quick to get things styled.

I would recommend : 1. master CSS and Flexbox 2. get used to a component-based framework (eg. React) 3. make your life easier with Tailwind to create your components

This was a great video, and it helped me understand exactly what Tailwind was really about. I rarely like videos or leave comments thanking people, but I did on this one.

I built Kyle's hair using only CSS ☝️😀

Nice video! I’ve been using tailwind for a side project recently and I fell in love with it. I was looking for something NOT bootstrap and material UI is just not my thing.

I didn’t realize there was something like this! I didn’t enjoy Bootstrap, so I actually went and made my own presents css, in the same way Tailwind works. This helps a ton!

Started using it couple days back (coming from vuetify and material UI) and I just love it. The speed I can build the UI is shockingly fast.

Great and simple explanation. Exactly what I was looking for. Thanks!

I hear so much about "not having to worry about design" and "keeping CSS small" and "composition over inheritance." Taken to their extreme, these concerns are adverse to design. I see why utility-first is great for full-stack devs on small projects or awkward rebels frustrated by less control, but it's a huge issue when devs try to introduce this to the tech stack of a years-old enterprise project that multiple hands touch.

Very informative video! thanks Kyle!

first time watching a video of you talking with emotions and am happy to see that i watch the whole things smiling...

Great video Kyle. I've been using Bootstrap, but it sounds like Tailwind is the way to go for my needs. Thanks!

Great to the point video. Thanks man!

you are reading my mind thank you so much !!!!!🔥🔥

I like using the apply-directive to create my own button-classes using Tailwind. I tried using Vue-Components to achieve the same, but that just does not work well beyond buttons. This way I can still stick to the classes defined by Tailwind, but "combine" them into my own .button or .input classes to ensure uniformity across the app.

Maybe I'll eventually take a look at Tailwind, but I'm more used to "component" libraries, so I kinda want to stick with Bootstrap for now. Its utility classes have also been sufficient for me so far. I want the project to compile with only the needed classes though, I think there's a tooling for that.

You make things start making sense.. 👏

Very informative video. Thank you!

Kyle, your content is fabulous!

Bro I dig your whole channel, you helped me a lot of times. But what I want to see now is you playing that jackson! I've also got one. Cheers :)

Good level headed and unbiased advice

TailwindCSS is the best update on CSS libraries I have seen in the last years. This is just pure art and after using it for 2 projects now I am entirely in love with it. ♥

Tailwind 3.1 seems pretty legit. Being able to use the square brackets to modify your own custom css is really powerful. It was a feature in one of the older versions, but required you to put a special "jit" feature in your configuration file. Now it's built in. If the default value of the padding defaults are exactly what you need you can just do p-[1.2rem] and it will work. You can also create custom classes for things that will be used more than once by using an '@layer components' import in the CSS file below the Tailwind imports and then @apply after you class delcaration. @layer components { .myClass { @apply p-5 h-10 mx-[50px] } }

thank you for another enlightening video

Great video, thanks for your efforts. God bless you

You had my curiosity. But now you have my attention.

great video. you told me everything I wanted to know + no bs

nice content i watch all the ads to help simplify the web

Over my time as a web developer, which is a decade now, I tried many flavors of CSS. Started vanilla, got into Bootstrap, both 2013/2014, then Foundation with BEM and SCSS around 2016. In early 2018, I stumbled upon Tailwind for the first time. And yeah, got the same prejudices as many: too many classes, looked hard to learn, bloated CSS file etc. Really thought it wouldn't get anywhere. Later that year, around September, I watched some Laracasts and Jeffrey building some project with it. I rethought, and tried it out on some designs. What a game changer it was! As a WordPress custom theme dev, it still integrated neatly. Have been using it ever since, and never been looking back. No writing too much custom CSS, no time-consuming naming of classes. Happy Tailwind user, essentially. 🙂

The main point he mentioned "if you are not good at CSS" tailwind will look awkward to you

Hey Kyle, what do you think about Material UI? I think learning that and Tailwind CSS would be ideal. One gives you the possibility to customize as much as you want, the other gives the ability to design a UI on the fly.

👌 We can create component class like `.btn` in tailwind css also

I did my last 2 projects in Tailwind CSS and is very productive! I was able to finish the project very fast and also I now enjoy styling.

Just In Time compiler coming in hot to add edge cases without bulding all directives, all pseudoclass utilities and maaaaad speed. People be complaining about the extra markup; yet, they do not realize the massive flexibility. Plus anything tailwind labs touches is gold. Headless UI and heroicons are great examples

To the point. Thank you.

Tailwind is good, i had the same skepticism before and after using i changed that, but tailwind has a thing that it does not work too great with dynamic props for instance, for that something like styled components is a better approach. I am between these 2. Tailwind is easier to prototype things quickly and very scalable, while css in js is more ergonomic

Thanks a lot Kyle

Just used Tailwind in my recent project and I admit it's really addictive and awesome

thanks very well explained

Mostly I prefer to write my own css as all these libraries have way more stuff in them than what I need. But I do use both bootstrap and tailwind css from time to time.

I wrote the same thing using jQuery back in maybe 2013. We used it on only one large project farmed out to a 3rd party. My Boss didn't like it but I thought it was a cool idea. Called it Stylizr as many plugins for jQ had that kind of name convention. Also a huge processing overhead looking at every element with the class of "stylizr" and then parsing out all the other shorthand to replace with longhand "style" information the browser could use. Also, completely non-reusable. Great if you don't want to open multiple files or scroll to your section but that's about it.

It will take me time to change but am still stuck with MDB. Good content 👍

i tried a css challenge and the hard part wasn't deciding which properties to use but how to name the divs and tailwind solves that problem and i loved it.

first of all, great video. At 6:42 tailwind actually have a solution for this, you can make one class combining several classes and use that one instead.

Tailwind is for people who don't know what the C stands for in CSS.

I love tailwind. Custom CSS plus tailwind is all I ever need.

Thank you 👍

you really helped me !!!! I'm going with Bootstrap " This Time" ...(I'm a noob at the moment)

Great video

across frontend, backend and data engineering tailwind is probably the best framework I've ever used. highly and well opinionated while allowing full control and flexibility.

It wiil be awesome if you make a series on tailwind css from beginner to advance stuff

Best thing I love about Tailwind is that it lets me do SFC in React. No more context-switching between a JS file and a CSS file.

I understand that Tailwind has some features that bootstrap doesn't. But I've been using bootstrap for several years and if you don't want, you don't need to use the built-in components because you can use only the classes just like Tailwind. The component library of bootstrap is a flexible library that's easily overridable. I totally prefer to write some CSS rules instead of having 5 lines of class names in each div.

Dude could you please make a tailwind tutorial series where you make components? I would love to see that!

For older developers, as in having been a developer since the mid 90s, I can say when CSS came out we became conditioned to avoid things like "names" and "functionality" as part of the name...like text-red is just a no-no because you can't then change the color to blue...So ok you can have text-blue as well, but at that point, I still fail to see the point. I'd rather just write the css myself (scss actually, which makes several of these issues easier). I'm starting a new project so I thought I'd at least see what tailwind is about, but I can't get past the very essence of what it does because it clashes with 20+ years of not doing that! Though to be honest, I'm quite ingrained in boostrap because it made sense to me when it came out. I understood what it was trying to do while adhering to those principals older developers had developed.

The reason I'm loving programming

I just use tailwind for 3 months ago... it's amazing

First Kyle I've seen without a hole in his wall.

I learned web with tailwind, and I didn’t know anything about css before. Tailwind simplified my learning so much! And for the ones who don’t want to rewrite the same code for the same buttons, you also have the option to create tailwind classes with the @apply keyword 😋

Great video! Can you make a video on how you customized the fonts?

Bootstrap has utilities classes for doing this. I have been using them quite a bit. It may not be as in depth as tail wind but it goes quite alot.

Funny how times change. Not so long ago, web devs focused on clean markup with no uneccessary classes/ids. Set a class/id to the parent and style all sub elements using child selectors etc. There was even a term for developers which over-used divs and classes - they had "divitis" and "classitis" ! :-)

I think you can also define specific spacing with bootstrap

Why don't you make tailwind CSS tutorial.. we are interested in it.

Tailwind with React or vanilla JS = chef's kiss. I haven't had much luck getting the JIT features to work well with other libraries/frameworks, but the classes are almost worth it on their own.

You don't have to copy paste the styles. You can have a custom class suppose btn.

I try tailwind and i love it 💪🏽 is so easy

hey ...you told me you will and you did it...nice to have your opinion

not a webdev but now i know what the fuss is all about. thx. btw this compostional pattern is well established in other industries like games with ECS where your "object" is really just the sum of all your components. there is no real object anymore. just like a "button" that is just the compositional sum of all its classes in your example

hmm, ill use it in my next website development !!

Pure css is always the best. Sass makes it much easier.

I always appreciate your approch is explaing things easy. I am a beginer for React/Next js, but done dozens of amazing websites in Wordpress. I wonder why every one writing too many css(Tailwind or Classic) classes for every elements to design a simple section on a web page ? Why, so far no one made an extension for VS Code to make these css style much easier ? I mean, a pop window should be having a small canvas and tools like div/Button/inputs/etc. Just drag and drop on the canvas and design a card for example. Press generate code button. Which should convert that design to basic html/css(Tailwind) sinpets. Paste that snipetson our code. Later on one can alter that as they wish. Now for beginers seeing css code looks like a rocket science and not showing interest on web applications. Please suggest any simple tutorials to familiar for designing a simple web page. Now designing a Navbar and Sidebar with responsive features looks very hard even after 45 days of learning React.js on RU-vid.

this guy is one of few people I take their opinions very seriously .

I don't know what tailwind css have, but using bootstrap and coding with classes and creating my own css styles I realized that Bootstrap is very good for creating container and in columns content, it would take a lot of time to write it on my own so bootstrap have some good stuff, but if it comes to writing something that will be presented on the site more than once, it's better to write your own CSS code. Because for example if you use 8 the same buttons and everywhere you added class="px-4 py-2 bg-blue bg-lightblue-hover d-inline-block mx-auto transition-0_3s border-around-5" then client or you will want to change to a different style, then you have to edit it 8 times or copy paste and find all places where you used the same button. But if you wrote your own code where you added only primary-button, you just edit styling of that class and it changes in all 8 places. The only classes I like to use separatly is mx-auto, everywhere I put in buttons display: inline-block to they are automaticly moved to left, so mx-auto adds margin left and right auto so the button is in center and class ml-auto makes button going to right side of container.

Please compare tailwind vs custom CSS classes

I never use bootstrap and always make my own css because its just a template and its a pain to edit it. I never heard of tailwind before i watch this video, and now i really want to learn this. From what i heard from you in this video, tailwind is basically shorter + easier inline css, which is what i need.

6:43 - Use can just create your own classes in your input css file and then @apply tailwind to it. for example a .btn class that has a line of tailwind classes.

I didn't hear you mention a single thing about tailwind that bootstrap doesn't do. I build pages every day using bootstrap doing precisely what you mentioned p-5, px-3, m-3, my-3, h-1, h-3, etc. I'm looking at tailwind because I'm using Astro to replace wordpress and tailwind is integrated while bootstrap is not. Regardless, I am simply pulling the pieces of bootstrap that I use and encapsulating them into either the global stylesheet or components. I extended bootstrap by adding my site colors not by replacing the bootstrap colors. I simply copied bootstrap button classes and changed the pieces to create my own site buttons. Doing that is exactly how you described tailwind. This is a bit tedious but I can't see learning tailwind as being a benefit at this point. Maybe I'm missing something but bootstrap seems very easy to extend and make your own. Anyway, love your work.

When I write reusable components with/without a js framework, I use semantic markup and rarely need more than 1 class on the parent element. It's called UI consistency.

For plain CSS, HTML & JS you can create a class for a reuses set of tailwind classes.

Actually this is the first video that clearly explains what Tailwind is. I reviewed several online articles and a number of videos and it seems like no one can explain what Tailwind is.

I love Tailwind CSS but sometimes it makes my component "heavy" to read since you have a long list of class though the div and then my eyes mixing" these big lines of CSS classes with the component logic. The way I found to separate the workflow of component with the styling is to implement and add a scss module to my component (with the @apply func) and then have styling and component logic in two separate ways. This way I can work on my function without having my eye reading the Tailwind classes inside the component

You should have pointed out using postcss offers you to declare any custom classes yourself, so you won't have add each tailwind class in the html itself (especially for repeating stuff like e.g. buttons). Also building the css for production with purgecss strips all unused tailwind classes which leads to incredible small css files. You should never use tailwind without proper configuration and purgecss. It's actually a tool to create your own custom library for each project and not a static css framework just to use by importing the whole framework. My favorite web dev stack today: Laravel / Jetstream / Livewire / Tailwind / AlpineJS

please make a bootstrap and a tailwind css course🙏

I think it depends on use case, tailwind is good for component based js frameworks. If you change tailwind classes for one re-used component, it works well. But, if you are coding a landing page or some server side rendered template, where the html block u write isn't repeated. You are better of with boostrap Or foundation. You know why jquery is used most? Theme developers of WordPress, shopify, magento, Drupal, etc use jquery. Jquery gives max backwards compatibility. They also use bootstrap in theme development.

Been using tailwind for a year now and am regretting it. It is basically a rename of CSS properties. It is limited (there aren’t utility classes for everything) so you end up having to customize or mix & match. It makes your markup ugly and hard to maintain. It is difficult to debug because you can just edit what all your buttons look like in the dev tools, for example. You have to memorize an additional set of names for css properties, e.g. “line height” -> “leading”. Sure it’s convenient, you don’t have to switch between CSS files and your document, but you lose the power of CSS selectors and you end up duplicating classes a lot. I’m going back to SCSS which gives you cleaner code, and flexibility.

Hi, thanks for clear explanation. I want to ask one question, if i already use one ui framework, let's say bootstrap or material ui, can i combine all of those ui framework with tailwind? what is your opinion?

Got one doubt. If Tailwind is a utility-based CSS framework which means one CSS class per property, how it is different from writing plain CSS inline styles?

When I started programming, I was told about the importance of "separation of concerns". Never use style inline in HTML, because it had to be clean and fully separated from CSS. Well, Tailwind is more or less like inline style on the tags. But wasn't that a bad thing?

Please do a react+tailwind tutorial, Thank you!

A few months back, I started creating something similar for my job needs. It's something very small, but it's the same principle. It's written in Dart SCSS and I intend to use a lot of small mixins to add to already created classes. Some examples are a file with button animations, another file with box-shadows, typography, spacing etc. You can choose button10 for example and insert the mixin in the .btn class, and automatically you get the animations or effects etc. I find it quite useful and saves lots of time during the development phase as well as adding consistency to the project.

Well, was forced to use Tailwind. Making styles took me more time then usually as I had to all the time go to their docs. It is prolly great for people who do not know well CSS, but for me and for colleague it was slower and less clean then simply using css. But some people in team are more backendish devs who doesn't know css so well so they like Tailwind. For me it felt like pointless abstraction over things which are for me easy, simple and fast and which I can write with closed eyes. On the other hand, it can help to avoid chaos in css as in projects with many coworkers it is really easy to create chaos, make numerous css bugs (specially when some devs are bad in encapsulating css), but this is general problem of big projects and big teams. Here Tailwind really helps to avoid many of such issues.

Tailwind is absolutely amazing if u work in a team.

Tailwind + Ant Design in a React or Angular project is

I'm a beginner (but i have pretty good knowledge of css) - would you rather use tailwind or vanilla css which i currently use and would you recommend for me to start using tailwind over vanilla css?

Utility classes in css is what most people need most of the time. When you are beginning to learn css frameworks, it is helpful to pick up bootstrap with its built-in components but on the long run you will have to ditch those components for a personalized one. That is what I realized while using bootstrap back in the day. Tailwind is a godsend and took out all those frustration.