Why is everyone using Tailwind?

A quick look at the idea behind Tailwind CSS;

💬 Topics:
- Working with Tailwind CSS;
- Utility classes;
- CSS best practices;
- CSS reusability.

#javascript

[WyzrdCat]

All these supposed problems that tailwind solves are things I've never worried about or had issues with in my 20 year CSS career of never using a framework in production.

[caspera]

Currently using Tailwind along with Daisy UI and it feels super productive without sacrificing aesthetics.

[ofmouseandman]

Tailwind is popular because is a solution to fix React's (JSX) biggest problem: Scoped CSS
Vue and Svelte don't need Tailwind and a solution like Open props, seems in my opinion better suited since (and using the JSX argument against it) it is just CSS bro

the advantages of managing ".card" or ".button" is you don't have to copy paste super long strings of class to correct a border radius across multiple components

[BarunKharel]

"If you are having hard time naming CSS class, then you are not a good CSS developer." - a CSS dev

[minikame]

i like tailwind because i'm dumb and it gets me out of the loop of having to look at a class and then scroll down to the styles to digest it only to scroll back up and find i've already forgotten wht i read literally six seconds ago. tailwind's like, "dw bro just write it here i'll tidy it all up at the end"

[joseacunacarrera]

For some reason for me it was super easy to understand and start using Tailwind

[volodymyrmatselyukh]

This actually is a fast prototype mantra. Rapid development is the reason why I use Tailwind.

[OzzyTheGiant]

Astro + Svelte + Tailwind + TypeScript + Go = ultimate wombo combo!

[RolandAyala]

Tailwind is awesome -- can't imagine going back to using anything else.

[OzzyTheGiant]

Ok everyone. I get that some of you don't like tailwind but this is why I use it:

- allows me to quickly customize existing components from other frameworks, like Vuetify, Daisy UI, Angular Material, etc. without having to create an entirely new style block or sheet for that.
- allows me to quickly layout items with common styles, such as with the grid classes. Yes, I get that using flexbox and grid is trivial but why define all that common code when I can specify the layout in classes. Speaking of which...
- it allows dev teams to use a common API so to speak. It's the same reason people used Bootstrap, as people that know those classes will be able to be onboarded much quicker.
- tailwind has the flexibility of allowing styles to be used on style blocks in case class lines get too long.
- tailwind eliminates CSS that's unused. Yes, a good IDE or extension can do that for you but why neglect those that use text editors?
- and most importantly, it's framework agnostic. No need to learn new libraries like the ones I mentioned, nor do we have to use convoluted CSS-in-JS libraries like styled components or MUI. I don't even like that philosophy. I want separation of concerns!

[tomsheldonworld]

I also used tailwind and yes it kinda boost my productivity. But man it make my component UGLY . Why can't we keep css in seperate file(relevant to the component) with relevant class name (or some separate abstraction ) . And i know about @apply but tailwind team itself is not promoting that idea. I guess that would have been better. People may argue by saying that they need to navigate back and forth between files (that would have been fixed with an extension / editor features) . I feel frontend framework/library devs sometimes became little adamant on the solutions they opted for(no offence). I kinda feel its a lazy way to solve a problem. so we end up like CSS inline style ( i know people will argue its different but man it feels same with less lines of code as we are using util class names) .

[FromagioCristiano]

There is a great article by Adam Morse (creator of Tachyons CSS, another functional css framework) title "CSS and Scalability", probably can't paste links here so just google "mrmrs css and scalability" and read the first post. It sums up what functional/atomic CSS (tailwind, tachyons, etc) aims to solve: transfering maintenability to where it is expected. We started (unintentionally) using CSS to layout stuff. Using naming conventions like BEM we were not only transfering our page "layouting" but also our structuring to CSS. It was basically managing "components" at some point (remember when there was ".Header / .HeaderContact / .Header--dark"?). And this is where I think this video miss the point of functional CSS. Yes, there is a reusable class named "button", but this abstraction is constructed just like a component. Modern front-end migrated fully to component interfaces (and while most could argue with that direction, it IS reality and a fact). So say you would want to change a thing on one of your components, where would you look? To its HTML? To its classes? To both? To a global stylesheet? In a "modern front-end" scenario, using components and functional classes, you would only need to look to its HTML. That is basicly the gist of the thing. Yes, it is ugly. But you are not supposed to be copy-and-pasting your component into multiple parts of your project, that what it is for: reusability. If you don't like Tailwind, don't use. Need to use "traditional classic BEM-formatted CSS"? No problem, use it too. I don't understand why there is all that gatekeeping from both sides "YOU SHOULD USE TAILWIND OTHERWISE YOU ARE A FOOL!!!", "IF YOU USE TAILWIND YOU ARE JUST A LAZY DORK". Like, just, relax everybody. Search why a thing exists, then you will understand why it was built and to solve what problem. There is also an amazing resource by Adam Wathan (creator of Tailwind) called Refactoring UI that lays the research to what is embedded into Tailwind (coloring, spacing, etc). Great starting point to understand "why everything looks the same" in tailwind by default.

[tznniwm]

i prefer to limit myself to using tailwind as a utility only, not to build an entire app with it.

[harshrathod]

TailwindCSS and Qwik; fast and furious! 🔥

[zuzukouzina-original]

I use Bulma css, they don’t have premium stuff you’ve to pay for like tailwind. Tailwind is partly opensource, if you want more you’ve to pay.

[anasouardini]

People who hate Tailwind are only in phase 1.
Believe it or not, there are two phases when it comes to learning Tailwind.
Phase 1: you only use it once and start complaining about how ugly it is, and it being so different.
Phase 2: you give it another chance and start using it in a real project. This is where you fall in love.

[Jack-hkkl]

Just use css modules: dont gotta learn a whole new syntax, it scopes css, and it doesnt make code ugly lmao

[NatnaelAbebe-ogbt]

if start coding, web development or full stack dev today is it an opportunity to get a job remotely

[theworldismine]

Tailwind is the best thing that happened in UI design
yeah it's that good try it!

[Geomaverick]

I understand why people like it but the methodology isn't truly new...just new to people who have become programmers over the last 5 to 10 yrs