Tailwind CSS is the worst…

Before tailwind I used a lot of styled components with React projects but now I’m loving to work with tailwind in NextJS.

When building components, it's nice to have all the css within that same file.

I love the end part, nobody cares

TailwindCSS is the best...

I've never found bootstrap hard to customize. Am I weird?

I find this video clearly of no use as SCSS developer. In 2023 who the hell is using vanilla css and tailwind??

Tailwind is a fine technology but the way people typically use it is very bad.

Tailwind supports semantic styling by creating your own sets of reusable classes using @apply. But people don't end up using that, they just end up throwing utility classes all over any template anywhere without any thought about where the styles should be defined etc.

You're as likely to see tailwind utility styles applied to use-case application components as you are to see them applied to component library components. Everything gets mixed together with no abstractions and unless you get everything right the first time, you'll never be able to practically migrate and improve your styling in the future.

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.

For classes its good if you reuse them well, but for big projects usually I split styles for each component, so tailwind becomes to be useful since I split them anyway I might just add it for each component the styles. The only problem I find its hard to debug styling issues

The next person working on your code cares about your code choices.

"Nobody cares", that got me 😀

Tailwind definitely makes it really hard to go back to something like Bootstrap for example.

Just casually mentions the inline fold for classes -- I wish I had know about this, that is so helpful.

LOVED this video!

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.

East or West for tailwind css is the best

1- Modern framework has scoped css so no problem to change some properties in your class without breaking all the site.
2- Good practice forces you to use a component for only what it is suppose to do. So don't build complexe component and you will not have to keep in mind what class do what.
3- Utility classes is a good option because longer the project the more tiring it is to choose how to name your classes, but it's not a complete solution has you can see. It can help in some case.

I don't have in and back from css file repeatedly
Tailwind saves alot of time, is less frustrating and clean

Is it really CSS if the Stylesheets never Cascade?
If you like the tailwind abstractions, you can use the @apply directive in your stylesheets.
Just avoid using only utility classes to construct entire components.
When I started using Tailwind I had to manually use CSS purge, it wasn't built in...you can also purge your stylesheets and set up rules for conditional renders that CSS purge doesn't automatically pick up.

create some shortcuts in tailwind. reuse those shortcuts wherever you need instead of the long lines. 1 place to rule them all. define your custom colours with some css variables and you have a simple solution for light / dark mode too. takes just minutes to do.

Vanilla Extract ftw.

This is wonderful, loved it!

There is no debate, css gives you so much features that no framework can even compete.

Unocss the best

😍💕💕💕💕🥰🥰🥰🥰🥰

What a conclusion, love it xD

At first I hated Tailwind but, I kept going with it. I started to really like it and used it for nearly two years. But, more I used it more I started hating it. I felt like my brain was going soft with CSS. Plus, I saw a high school student using it. Then he came to be and started asking basic CSS how to questions. Why learn CSS when you have Tailwind. The file size is ridiculous. I started moving back to SASS. OMG, I forgot how much I love SASS. I made the switch back to SASS and never looking back. Sticking with SASS and never jumping on these CSS fads any more. Plus, take a look at the "State of CSS" 2023 survey. Tailwind is starting to fade away. Maybe it will come back. But, if I had to bet ten bucks on it, I'd say bye bye.

Pros: "Less code" (for styling). This is a bigger pro than less code writing business logic. styling code is what creates the most chaos and from the video tailwind seems to solve this

Can not having 100% Reusability a con for Tailwind?? I mean like in quite a few cases the styling is directly applied to the element at hand. we could of course extract a few components for reuse

but seriously, how do I get access to you memes. I desperately need those😭

love tailwind

I really like Tailwind and frankly dislike writing scratch CSS (I can write scratch CSS, it just decrements my dev experience).

I recommend everyone at least try it, but it's not for everyone and that's cool.

this video is sooo good that warmed my heart

"A Bootstrap app it always tends to look like a Bootstrap app"
That's the most stupid excuse I've read in a long time from someone defending Tailwind... Of course if you use the BS built-in components it's going to look like that... But perhaps is useful to remember that Bootstrap ACTUALLY OFFERS BUILT-IN COMPONENTS FOR FREE, which Tailwind DOES NOT. All your components in Tailwind have to be built by yourself: cards, carrousels, breadcrumbs, badges, tabs, paginators and a whole list of etceteras already bundled in BS, or else PAY for them. Hence, that's why a TW app doesn't look like a TW app: because in every app you're going to need to build things in a given custom way and there's no built-in components to reuse from scratch.
Bootstrap also offers a whole lot of helpers and utility classes that can be used inline as well just like is the default in Tailwind, mainly for helping yourself to complement your design and customize things whenever you need it, just like Tailwind claims to do.
Lastly, BS is pretty much extensible by a whole lot of variables to change the aspect of pretty much about ANYTHING, while keeping the design system in place for everything, including built-in components.
Really, try to look for another excuse. This comparison is like the one comparing a serious framework like Angular against a poor library like React. Oranges and bananas.

i really love normal css

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.

Yeah problem with CSS in JS or even tailwind is that cascading of styles really does not happen ... thus really breaking most the rules that normally apply with pure CSS - you can see why people get frustrated. Verbose maybe, Classes that you forget what they were for maybe.. but pure CSS has my respect and is very powerful at the same time - all these libraries will forever be playing catch up to the latest standards released by CSS. Tailwind does help in some situations but it's an abstraction with its own problems as mentioned and then some. And as mentioned by others - use variables and design tokens! - but like any team project things can go south very quickly when people don't adhere to the design patterns and naming conventions in play (every industry has good and poor craftsmanship).

Issue 1 : it's not like browser has "inspect" features...

Problem 1 is no longer a problem because you can use @apply in css and use tailwind classes

I think people overvalue prettiness/cleanliness and undervalue simplicity. Having styling at the exact location where your component lives makes your life so much simpler, you can collapse those blocks anyway, browser doesn't care, user doesn't care, it's easier for you, the only thing that suffers is your OCD.

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?

I use styled

I'm offended that no body cares about my teknulugies!!

instead of Tailwind:
— component files (like, .vue)
— scoped styles
— nameless selectors (like, .my-component > div > div > a > strong)
— some css preprocessor
— and a number of mixins, doing what tailwind classes do

This way you'll get the best of the Tailwind approach, but without the horrors of it.

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.