Tailwind CSS is the worst… 

I used to hate Tailwind but when I used it for a really big project that's when I started to appreciate it. It saves me hundreds of hours in styling.

As a small note: inset is an actual property in CSS which is a shorthand for the directional properties top, right, bottom, left. Much like using padding or margin to shorthand padding-right and margin-bottom. It's not TW exclusive which means you can use it in your own CSS :)

I've tried many ways to write CSS over the years. For me, the most scalable way of writing CSS is "CSS modules with global variables". When we are following a _token based design system_ , we can have pre-set values for colors, spacing, font scale etc to help maintain consistency. Additionally, CSS modules resolves the issue of naming conflict which otherwise was difficult without a proper naming convention that everyone in the team had to follow. The issue I've noticed with Tailwind is that it makes component look ugly with way too many classes. However, it does increase productivity, no denial about that.

Love the honesty here. I went to try it on my last project thinking it'd be as easy to use as bootstrap. It definitely has a learning curve, but I also see the advantages. Also, the setup really isn't THAT bad, but learning how to use it is a curve.

The amount of effort the Tailwind team has put into adhering to research-backed best design principles is a highly under-appreciated aspect of Tailwind. The ability to produce high-quality UI with very little knowledge of things like optimal typography sizing and complimentary colours is incredible. You can read up on the science behind it on Refactoring UI. Adam and his team have done an incredible job making UI best practices accessable to developers without design know-how. Couple this with IntelliSense, Language Processing Servers and Autocomplete extensions for most major IDEs and you have an abstraction that truely adds an immense amount of value. Not only lowering the build-out time of applications, but also making them more scalable and maintainable.😎

It seems like people forget you can still have CSS classes and style tags in your app’s CSS file for the more universal stuff like buttons, text boxes, etc. Inline styles are just super nice for single use things like navigation headers, etc.

I had been using the utility classes of Bootstrap for years before Tailwind came along. Because of the limited features of the Bootstrap utility classes, I had to augment it with SASS for more bespoke styles, now I can do 95% of my styling using Tailwind with a tiny tiny global plain CSS for those real edge cases. It's great.

Ones you go tailwind you can never go back

I started using Tailwind like two weeks ago and I have to say: although it's not easy to get started in the beginning, a lot of things actually make sense. I don't have to worry about the precise px values anymore and I think it helps with understanding the "mobile first" approach. I have been doing frontend for a couple of years now, but for the first time I feel like it is quite easy to tell the components how they should actually behave. Less code, more CSS classes :)

2:30 does this abstraction cost anything at runtime or is it rolled out somewhere before this? (Are any of these CSS abstractions computationally cheaper than vanilla CSS minified? or maybe web still stuffs its ear and starts screeching at these type of questions still??)

Another amazing video! I haven't used it yet but it did convert me into trying to create utility classes that can be reused all over vs. a all-in-one class which I might have to repeat with a slight variation elsewhere.

I just started learning Tailwind CSS and got the notification about the new video immediately…

love the humor in this, and the crash back to reality you give devs that have lost sight of what's important. Great work as always, keep it up, and thank you.

About the first problem, you will nerver need to name things if you use scoped styles of libs like Vue and Svelte, and even without them, you don't need to add an id or a class to every single DOM Element, if it was the case, add an id or class just for the first Element and use the appropriated selector for that, like ".main-navbar > ul", using SCSS or any PostCSS nesting plugin this is even easier.

I tried Tailwind a couple of times, but decided to stay with good old SCSS. I personally think classes do a great job making your html/jsx self-explanatory. It's much easier to distinguish between, for example, buttons and text links by looking at their class names rather than a bunch of tailwind styles. In Tailwind projects I saw it was solved by creating hundreds of separate components most of which were used only 1-2 times in the whole project. This not only turns codebase into an unreadable component hell, but also sometimes seriously impacts performance. SCSS actually resolves all CSS issues I had. You can create mixins to reuse huge sets of css properties, and most frameworks support scoped styles which solve class name collision issues. I don't hate Tailwind, it does its job, just in a different way with different issues. I personally prefer having clean markup and readable git diffs for styles

hey Mr. @Fireship, in regards to the long lines you mentioned AND the separation of HTML & CSS, what do you think about the idea of extracting the styling out of the HTML to a separate SCSS file in combination with BEM and using SCSS' @extend keyword. As an example: ``` .faq { $border-radius: 1.25rem; @extend .bg-gray-100; &__header { @extend .align-items-center; @extend .d-flex; @extend .flex-column; @extend .gap-2; @extend .pt-5; } } ``` I've been using this approach for more than an year and I enjoy separated HTML/CSS, the power of SCSS (nesting, variables), short HTML lines and encapsulation due BEM naming convention. Ah and to add to this I've done it with Bootstrap, but might as well apply it to Tailwind as well. What are your thoughts?

Tailwind vs plain CSS is, really, an extension of the old "composition vs inheritance" debate. The "cascade" in Cascading Stylesheets is inheritance, defining a broadly-scoped thing that is then refined and overridden in a hierarchy. On the other hand, Tailwind is compositional, where individual tiny pieces are assembled as-needed into something larger.

What I've found really useful as opposed to tailwind is SCSS modules for components that import standard UI stylings from a master file. That way you get the usability of compact, descriptive classes for components without breaking styling in other parts of the app if styling changes need to be made in this part of the app.

Great explanation, I have an interview next week, and the whole day I was looking for a better explanation of tailwind, went through many yt videos, but was confused, thanks, I got the perfect explanation which I was looking for.

Inset-0 is the same as inset: 0; And is totally valid css in itself. Personally i tried tailwind and decided it was not for me.

I've been having to work with a system that uses Tailwind CSS that another company wrote and none of it made any sense coming from bootstrap. This really helped understand why there was no "baseline" style I could find like Bootstrap has. Thank you! Liked and subscribed

How did you highlight the root css of a tw class :O ... mine doesn't work by default ? is that a vscode plugin? I am using tw 1.9.6 atm

I went from thinking Tailwind was stupid because "its not difficult creating classes and SASS makes this easy!", then I began working in a company that uses tailwind exclusively for styling (as little manual styling as possible) and after 3 months of using tailwind I am loving it 100%. I even remade my passion project to include tailwind due to how easy it is to use

I have been backend developer from years. Time to time I used to check some frontend/Css stuff and my site always looked horrible. I was like without designer I simply can't get look, alignment, layout that looks like a Pro work. The chaos with raw CSS was just pushing me behind always. Than I tried Tailwind CSS and boy..I never looked back. All of sudden everything sounds logical and well thought out. Now I'm able to consistently produce high quality site layouts without any designer help. In my opinion what Tailwind CSS brings to the table is order and logic in totally chaotic CSS world. Most of the time you can assume what utility class names within Tailwind CSS. No need to go into complicated SAAS and all other syntax sugar totally avoidable stuff.

Love your content. Great videos. Have you done one on PicoCSS yet? Where does pico fit in?

awesome video again thx for this

My interest in tailwind began when I tried to basically reinvent it without noticing. Started composing ~sort of standardized~ classes on a project which, when I compared to Tailwind, some were even _identical_

I just learned it 2 days ago and did the first project yesterday with it. I dont like to clutter my code with inline style but to be honest, its not too bad. Good thing about doing it with React is that you have a lot of compenents and it breaks up the code in differnet files so it doesnt seem cluttered. Now that extension, i am definitely going to be using it!

I just started using it and mostly use it just for the layout and then CSS for everything else. It just makes sense to me to separate concerns that way while not putting tons of extra lines in my html. I find tailwind easy but my main concern is going back to fix something. finding the right command would be like looking for a needle in a haystack. And if you have "cards" or "containers" that share repeating code you would have to switch it everywhere. Instead of switching one line of code that applies to a class in CSS

One thing: the "purge" method where it's pre generated all variants, then removed the unused ones is a legacy mode. Since 2.1 the default mode is JIT and generates the CSS classes based on the class names used in your HTML/JS code.

I love tailwind but lately I've been hooked into using sx props from ui libraries like mui and mantine etc. This allows me not only to select pseudo classes but nested classes of an element especially if it's a third party component that uses multiple elements inside it.

Generally a pretty solid video. One gripe I have is that you point out flaws of standard CSS approach and how tailwind solves it, then you list tailwind flaws and show tools that can help deal with them. The thing is - anything compared to basic, no-tool CSS approach will be better. But there are things that help you make CSS still be CSS and solve the issues that you mention (SCSS, style scoping, stuff like that).

some reason to use the typescript are the details on the js which not affordable than java right

I love how you make your videos, they always make me laugh meanwhle I learn something useful. BTW I am a part of the tailwaind cult

You know he's bout to drop video on the topic when he asks about it in community posts 💀

as a react developer, i just can’t deal with bloated jsx, especially when i have to write a lot of conditional classes, styling and internal functions

One thing it also promotes a css pattern, called functional css or atomic css. Among the other benefits you mentioned, Where specificity is no longer a large concern. Just as inline styles can look ugly and long - selectors can be even worse. This pattern has existed for a long time and can be especially useful in large code bases. Also in large code bases it can actually greatly reduce bundle size! especially for css. I have seen these patterns prevent so many bugs. And no more devs trying to add in !important, or a id selector on top of a class selector, etc... Still, there are pros and cons like you mentioned.

I personally firstly split my HTML into multiple components and then use different element types to use for my CSS selectors instead of only divs with classes. Not only does this save me a bunch of code ( - ), it is also a lot prettier, complies web and accessibility standards (Using lists to list elements instead of jamming a flexbox onto a random div) and even after months of not looking at the code I can directly see what rule does what, as I use selector nesting (nav > ul = Navigation links for example). I personally hate the jquery/php way of just giving everything a separate class. That is not what they are meant to be used for.

Completely agree with the conclusion. Back in the day, i researched a lot about which tech i should pick for front end dev. I came to the conclusion that all these choices are simply tools to make the same end result and i think it applies here too

Never used Tailwind, and I still can't bring myself to.. Similar to replacing terminal with git guis, I think it helps a _lot_ with learning to use the original CSS where you are writing properties and seeing the result. I'm also a big believer in very tidy HTML, with minimal classes. It shows the dev in a single glance what that page is doing, and how it's set up.

And how you do it with custom classes? I saw I had to repeat the addition of custom classes twice, in tailwind config and twmerge config. Also I had problems with some tailwind classes and twmerge. For example: className={twMerge("w-96","w-full")} will apply only "w-96". There are bugs like that. And I wonder if the characters we save in css with tailwind aren't less than the characters you have to put in that big punch of classes in the components. With css the classes have not that big names, and you can use utility classes also. With sass, well, is even better. After using css modules and sass, I find really difficult to work with tailwind. So much plugins and configuration, repeated code. I try to think is because I don't know how to use it, but I see no tutorial explaining this problems (how to manage the config, plugins, and custom classes in a big project). I am trying to make a custom system design and tailwind classes are not matching the sizes and colors I need so custom classes are a must.

I have used bootstrap most of my earlier time and its easier to use the predefined styles, components. The cons that in that time no purging feature was available + my modified and added styles easily get more than 400 + KB of size (lots of unused styles though). Nowdays started using tailwind, i barely get 30 - 40KB of final css bundle. I don't have much issues with readability cause i can create mental model reading those classes. And not switching between css and html is best thing for me.

Another problem that was not added here, is the fact that the HTML will usually not be cached (if you use SSR), compared to the CSS, which is usually cached. That means, that you will increase the size of each response. But this is usually fixed by still using classes for elements, but instead of vanilla CSS in the classes, you use the Tailwind preprocessors. Anyways, nice video, really helpful.

Depends on how it's used. If I can't look at a the inline class and know what's going on because it's too long I'll break it into a sass file with standard css but use @apply for useful tailwind classes like my-1 or responsive classes. Gives me all the benefits of speed and keeping things neat and orderly. This way I can have something like @apply sm:text-sm md:text-md lg:text-lg in a single class that I can throw around everywhere without having to copy paste the same thing inline and without dealing with media queries.

I wonder your opinion on the "PicoCSS" you mentioned at the end. Because very simple things are magic, the key is whether there is flexibility in customization. I look forward to your opinion.

Hye , buddy material Ui is good choice? To design webpage?

While I haven't used Tailwind much, I much prefer just using plain SCSS. Quite a few of the problems that Tailwind is designed to solve are just React-isms in my opinion, and I don't use React. One of the advantages that I do think Tailwind has is that it makes it harder to introduce visual inconsistencies and the way it's structured lends itself to good visual design. Overall I still prefer writing SCSS, though.

Very good video with valid criticism. I do like Tailwind but I don't use it, especially on big projects, because it's extremely hard to maintain it. I lost count of how many times I had to re-write a whole component because there was so many tailwind classes I had no idea what was going on. In my opnion, Styled Components solves all the issues with vanilla CSS without losing the power of CSS.

How is that installing postcss and add some configuration is a cons for Tailwind, are you be doing something on frontend lately?

What should i use, if am a front-end dev student, who want to create landing pages for small clients as a site hustle? i know how to create static sites with raw html, css. should start to learn Tailwind, and move on to Tailwind UI. which will do the job alot faster and easier and expand my knowledge?

I enjoy writing pure css but it's true that it can become bloated quite easily. I often use tailwind for most styling when I need to be faster and and just add custom css here and there when doing something fancy. But from time to time pure css is the way for me, I think I learn more from doing it directly :)

I think svelte's scoped styling removes a lot of the need for tailwind. If you're composing components correctly then you probably aren't worrying about long class names, or global styles

I would like to hear an opinion on Chakra UI, Tama GUI or similar. With them you pass utilities as props instead of class names and they can be type checked and dynamic.

any recommend to make a layout for responsive ?

SASS is my way nowadays, and Its pretty fine. css with code nesting is god-like already. Tailwind helped me out a bit early on when i wasnt too sure of standards to use (had poor css writing, many overlapping classes and stylings going on). SCSS keeps things organized for me very consistently, and if I still want to follow a utility based approach, tailwind showed how easy it was to do so imo.

Tailwind has addressed some of the core problems brought about by all the historical cruft and technical debt in CSS. It's innovative, but I think it's not quite there yet. Hopefully it will prove to be a stepping stone towards a much neater solution.

Does Tailwind really purge unused classes? I use Tailwind in React Vite project and build it then the CSS file HAS all unused classes.

What theme you are using in VSCode?

Or you could just use CSS Grid with scoped classes to immediately remove one of the two major problems that Tailwind helps solve. If I had to choose between the problem of naming classes and the problem of extremely convoluted CSS that messes up my templates, I choose the former. Naming is just not that big a deal, really.

Completely agree. I like it because duplicating styles/components between projects is a breeze, and then refactoring to fit the new project’s design is so simple.

I gotta be honest, when building custom UIs with React I highly prefer Chakra UI since it is way easier to build dynamic styles. With Tailwind I always have to use template literals and looks so blowed up. In Chakra every CSS property is just a prop with a value and you even have prestyled elements like a Modal or a Card for instance that look pretty decent. And the most annoying thing is the spacing system... I mean comeon I always reduce the root fontsize to 62.5% so I have either to create one spacing value for each rem value in the tailwind config or I go with brackets... I don't know, Tailwind does not look to good to me but maybe I am just using it wrong.

Started with Bootstrap as a student. To me Tailwind looks very similar but a bit more customzable, and more daunting for a begginer. However I haven't tried it in earnest yet. Once I get the hang of Bootstrap I might end up switching to Tailwind

I once had the same idea that Tailwind is based on, before it existed, and created my own library of css classes similar to Tailwind's. But I didn't like the html being cluttered and not having the styles separate. I also like to theme things, and that also became more difficult. Since then, I learned to fully master scss/sass and think it's much more powerful , creates more legible code and is easier to maintain. I'd never go back to plain css though, at least at it's current state.

Right now im using Material UI with React, and it saves me tons of time, with the "sx" prop i can make some small customisations, and if i want to fully customize it i can style the components globally. It is my favorite choice for now.

This would be valid except when you work in a team, where you need to get everyone on board. Plus in bigger projects it's good to have reusable classes, so how do you reause the same CSS definition on multiple objects in TW?

This came up in my feed at the perfect time. I've been using Bootstrap for awhile because I'm lazy, but I've been looking for an alternative for small projects which Pico is perfect for. Plus it makes me think of Peco, the little mutant onion character from "Breath of Fire 3" so, bonus points there.

I tried Tailwind before learning much CSS. I felt like I was having to learn CSS to understand how to use Tailwind. I switched to plain CSS for now and got so much more done.

Tailwind really was a game changer for me. The biggest thing is writing predictable classes that just work whether it’s on desktop or mobile. I’d create little bugs and have to hack around to get my vanilla css to look good on mobile and desktop. Just like any technology there is a learning curve, but it’s worth it!

i started styling stuff many years ago with table layouts, yes that time when you had to style shadows with png, or even with jpg without alpha channel. 😂 so i went through many css concepts over the years (SCSS, bem etc.). i'm working in a web agency and for the frontend team and myself we found that css utility first frameworks like tailwind works the best for us. i think there is no right or wrong - there are many ways to solve problems. for us the big advantage with for example tailwind is the consistency in the styling. you have to use the same for example paddings over the whole project (ex. p-4). sure with "normal css" you can do that with css or scss variables. but the chance you use a custom padding is higher in a css/scss file. another extremly important argument for big and fast growing project is the overall css file size. with tailwind the file size remain almost the same no matter how big the project is because you always use the same classes and after purge it's extremly small. in contrast to normal css you have to create and download new css files (newcomponent.css) with potentential new css custom properties. often you have to assign special css names just for a simple layouting (aligning 2 elements horizontal with silly names comp__inner). so the css file size grows over time. the webperformance suffer. there are other advantages like specificity (even with correctly BEM), working in big frontend, teams etc. ...like i said. there are many ways and there is no right or wrong, but i found this is (at least at the moment) the best way for me. 😊

Just started using tailwind on my react project, day one. Hated it to start with but by the end of the day I understood it a bit better, not fully sold on it yet but still early days in this project so we'll see how it goes.

For me, BEM gets round the naming problem with CSS. You only have to come up with a name for the block element really. And being able to name blocks is kind of a requirement when working on a website/app anyway. Tailwind is a headache, the team I work in have decided to use it because back-end devs want to be able to make changes without doing any real CSS. A disciplined team using BEM or similar naming convention is the best approach IMO

Never fails to bring happiness as I see a fireship video.

Colocation is a major pain. I wonder. Could somebody develop an extension in VS code that tool tips the styles for given element based on the element selector in all linked css files?

I have my react components and separate scoped/modular SCSS files for that component - this approach is so much cleaner and easier than bloated jsx elements with tailwind. It's also so much easier to debug in browser and make changes.

It does make me consider how many younger developers understand where we've been with CSS and where it has led us - I mean, sure, these woods look awful scary if you are in them, but step outside ... hell, you just want to light them on fire. So, concepts like Tailwind are a LONG time in the making - look up "block-element-modifier" if you don't believe me. If you want to go back further, go languish in the Zen Garden, some real home truths were presented WAY back then - before some of you were out of nappies. Look it up - launched in 2003. Now, ALL of this absurd confusion can be totally ignored if you are building a small website or a simple application. Seriously, just use plain old CSS. This _only_ make sense in the world of massively complex web applications used by millions of people. That's cool, because those apps are so massive and so complex, they form black holes, eat themselves and somebody decides to recode them every 2 years, so they can justify their senior developer role... "Who coded this shit! - we need to start again!" "Gosh Darnit! - this page loads like 40kb more CSS than it needs! - we need MOAR POWER and PERFORMANCE! - I suggest we spend the next 12 months eating up the entire budget of our department to shave 30kb off that and load pages 100 milliseconds quicker!" Wonderful - then marketing and SEO comes along and bloats your supercharged performance powerhouse of a website with 1MB of render blocking tracking scripts - JOB DONE! - wh000t! "Sorry developer nerds, we need to keep our SEO-Juice - you just suck it down, 'cos the CEO says so, mmm'kay?" Some time later: CEO: "Why is our website so slow!" Charismatic marketing type SEO dude that kisses CEO ass: "Yeah, that's the web devs - they suck!" CEO: "Bring me the severed head of the principal engineer!"

Love Tailwind but what do you guys recommend for a ready made component library compatible with Tailwind? Is DaisyUI the best one or perhaps there's a better alternative to that. I usually like to use ready made components since that way I can focus more on the business logic of the application instead of designing things.

There is a select few utility classes that are nice to have from frameworks such as Tailwind or any other CSS framework, such as layouts, grids and font-weights. However, I find that large tailwind projects are hard to maintain, it quickly becomes a mess, it gets hard for new team members to join the project and quickly understand what happening. I'd rather spend a little extra time and create my own CSS for my need, it makes it a lot easier to work with in the long haul and ends up saving time, makes it easier for colleagues to join the project. Not only do I write my own SCSS, but most of the time I can completely reuse my SCSS structure for new project, saving me A TON of time. If you're somehow saving time with Tailwind, I suspect people don't actually know how to write good SCSS. As I said, a bit of extra one-time investment creating a good SCSS structure, components and perhaps a few of your own utility classes. But after that, it's incredibly easy.

I have looked at tailwind multiple times over the past few years, however I feel like many of the problems it tries to solve are already solved by component frameworks like Vue or React when the styles of a component are scoped to that component only. That way you can have good class names without having to worry about breaking something somewhere else and without having the ugly html and toolibg hassels.

Used bootstrap, CSS, SASS and Tailwind... its the ideal middle ground between SASS and Bootstrap. For me its a easy way to do custom CSS (like you would in SASS or vanilla CSS) with less mess.... just command + K to search for whatever you want... the documentations is super good!

I feel like all we need is a tool to quickly add some of the functionality from tailwind but for the most part just plain css with sass is better i think. Like I understand that you say we can use class names instead of needing to write 4 lines to achieve the same but we can manually put it in our css aswell to apply it to our elements instead of dealing with installing tailwind.

I've used Tailwind for a project and bailed on it. What I didn't like about it was trying to learn all of the Tailwind shortcut tags for simple things that I could just do in CSS (i.e. text-center, I mean why??). In addition, when it comes to building an app that can be branded and reformatted for layouts, having the Tailwind tags embedded into the HTML seemed very limiting. However, I have not used it enough to come to any any real conclusions but maybe there are best practices for it that I would just need to understand. I still prefer frameworks like Material UI where the components are mostly pre-built to save me tons of time trying to write the functionality but I can choose to overwrite the CSS myself, but that is a personal bias, curious on other comments.

I'm glad I started before all these frameworks and tools, all the choices must feel overwhelming for new developers. Our biggest problem back then was getting things to work on old IE

I began using it with the expectation it was going to be like Bootstrap and Material UI. Then I realized it was a utility helper and saw its power. It's definitely not the right choice )although Daisy UI can come to the rescue) if you want prebuilt elements. But it's impressive when you are building design systems.

Personally, I see it odd to have all the single details of css styles within a class. However, when it comes to large projects, it doesn't really matter since doing so really saves a lot of time.

styled components solve many problems and combine the best features of Sass and JSX. I've started using it since 1 week for my first professional project and its really cool. In addition to that, People who says that I write some properties that can be replaced by classes, i tell them that the classes that they write inline css is the same. Depends on how fast you are at typing. and which vs code extensions you are using to help you.

i really like Tailwind, but as someone that has been writing vanilla CSS for ages, I feel that if someday CSS adds the ability of breakpoints and states (like hover, focus, etc.) directly on inline-css, Tailwind will fall into the same category of Bootstrap's utility classes.

I think tailwind is a great tool if you know how to use it and when to use it, for the problem of too much classes over an element I would suggest to extend tailwind classes into one using @apply so if a group of tailwind classes are used often and they are too many then is good to have a simple class like .app-nav with all the @apply tailwind classes required.

I have to replicate a 5 years old project with thoudsan of css with less, my main concern with Tailwind is if would be possible to make pixel perfect the same styles, or I will lost by using just predefined classes

Thanks for the Pico tip, I have been looking for something like this. Is what I need to focus on coding and dont get too caught on styles.

Love the conclusion. I used to be very opinionated about coding styles, frameworks, etc. However I learned to simply adapt to whatever the team I'm joining in is using. I just don't join teams who use Angular, Ember, Vue Ruby, PHP, Python, Rails, Laravel, Django, Bootstrap, Foundation, Bulma, Elm, read more...

I don't like tailwind, I keep trying to find it hard to compose I just keep going to css

It made more since once I realized one needs to look at Tailwind as a utility language and not just a styling option. My only gripe is implementing it into a project, with all the generated pages and directives. They need to simplify it a lot more.

First time using Tailwind, I was lost and didn't love it but also didn't hate it. In Laravel everything was done with bootstrap but I hate it because it's not fun anymore ;) When they added in Tailwind and I got the hang on it, I have to say, I love it. Yeah you could change stuff or so but I think that will come with everything we use.

I recently discovered tailwind this year, and I personally love it. Ya it adds extra overhead to your builds and such, but I love how composable it is. And as stated in the video, you can define your specific design system and have tailwind integrate nicely with it.

I'm a noob programmer and one of the things that I really hated was using boostrap because somehow my mind can't understand how it works so I could never made any of the cool pretty things they advertise on their website. All I had to do with tailwind was copy and paste and it frigging worked. And I even managed to acommodate it to my project. It was the first time I actually managed to make my website look good by myself. so, I really don't care what other people think. I'm sticking with tailwind until I find something better for me

One of the biggest things I love is how it handles things like media queries and state. Being able to write something like "flex flex-col md:flex-row" saves several lines of CSS, and tells me exactly what it does.

i find it that when writing an app where the design doesn't really matter much/it's a tool it's ok to use bootstrap/tailwind, but when i write something custom for a client that wants a beautiful presentation, i just start with style resets and then vanilla css

Tailwind is good for a lot of reasons, but when you want more interactivity, state control over your component (warning, success, error & etc) you still have to write more stuff because tailwind it won't load classes dynamically (`bg-${color}`). An other way is to predefine component classes and state with tailwind apply. Still faster than normal css cause 4 lines of apply can be 20 lines of css.

Everything has draw backs, so I think tailwind is biggest challenge currently is setting it up, it should be a one line command for sure, I think that's what they're lacking now!

Learning through freecodecamp and this was the first video I saw from this channel where I actually understood everything. Feels pretty good to progress.