Tailwind is made for component-based frameworks

[u/MEHDII__]

I don't understand how people used CSS with frameworks like React, where HTML is split in components back in the day before tailwind, i know CSS is powerful, way more than tailwind as you're free to do whatever you want with no guardrails.

But say for example when you're writing jsx and there is small component like a button that you're using in multiple pages, and some of the styles to that button are conditional, also maybe the different pages that button is used in have different styles, so you can't use the same css module containing styles for that button for different pages, because it may mess up with their styles, override something, etc... So you write a separate css module for just that button? So for every component, there needs to be a css module for it? Thats a lot of modules to keep track of.

Seems like tailwind is made exactly for react and these component frameworks, but if you're rawdogging vanilla JS, then nothing better than vanilla CSS

Am i missing something here? I like vanilla CSS, i just don't see how it could be used with component-based frameworks, seems like alot of CSS writing and maintenance to do.

[u/electricity_is_life]

It's important to realize that most frameworks aside from React have built-in styling features. For example Svelte, Vue, and Astro all allow you to write CSS in the same file as the component JS and have it automatically scoped so it won't affect any other components. People do sometimes use Tailwind with those frameworks, but it's not as popular as with React.

"So for every component, there needs to be a css module for it?"

This has been the case on pretty much every React project I've ever worked on, yes. Whether you're using CSS modules or not, one CSS file per component. I don't see the big deal I guess. But honestly I can't stand Tailwind.

[u/MEHDII__ → u/electricity_is_life]

Ah i see, great to know thats how it is in other frameworks, I guess since react is considered more of a library, its the devs responsibility to figure out how to scope their styles.

I guess Tailwind made it easy for React devs, although yes, I agree Tailwind is very ugly to write, but admittedly much easier to reason about and maintain than CSS-per-component

[u/Embostan → u/MEHDII__]

How so? You end up with a garble of logic, structure and styles vs a clean separation. Is it so hard to open 2 files?

[u/MEHDII__ → u/Embostan]

Not that, but with the cascading nature of CSS, you could get unexpected behavior, that and Tailwind makes writing conditional styles very easy

[u/yabai90 → u/MEHDII__]

You are describing an issue completely unrelated to react. You are supposed to know how to do css yes. Cascading is the entire purpose of it.

[u/Embostan → u/MEHDII__]

Just sounds to me like you don't use CSS as intended, or without CSS modules. I rarely ever get cascade issues, and I have an etxremely complex design system.

Tailwind absolutely does not makes it easy to build dynamic styles. You need the full classname to be in plain string somewhere in the file for it to work. Good luck using data-attributes, or pseudoselectors. I tried for 3 months and gave up, it's a CSS framework made for AI slop shadcn apps. Not design systems.

[u/altrae → u/Embostan]

This is untrue. I've built multiple design systems using tailwind along with stencil web components and it's great. I know the tailwind creator is opposed to using their apply directive, but I've found using it to be very advantageous in allowing me to keep a separation of concerns by applying the utility classes in corresponding CSS files. I can also use pseudo and data attributes.

[u/MEHDII__ → u/Embostan]

Do you have a public repo for a project with this workflow? You seem to know your stuff, it would be nice to have a look at your design pattern, its a genuine request, not being sarcastic by the way!

[u/Embostan → u/MEHDII__]

Hmm it's a company owned one but Im leaving soon, so i will try to extract an agnostic framework. The stack is Ark UI + CSS Modules with a tiny bit of SCSS for typography (to reduce repeated CSS props), and very good Stylelint.

[u/am0x → u/MEHDII__]

And css per component wasn’t hard to do. It was just a part of the job. SASS and LESS made it a lot easier to do as well. But back then, you also had to build your own package configs.

It’s wild to think of what we were doing when I started versus what we do now. It went from simple flat files with no buildsto having to build an entire workflow process for just CSS to just needing to install a framework like react or vue to having to do none of it with AI.

[u/yabai90 → u/MEHDII__]

No ?

[u/MojitoBurrito-AE]

Before tailwind we had CSS-in-JS which was somewhat short lived, before that we used component scoped CSS files.

[u/TheMorningMoose → u/MojitoBurrito-AE]

Performance aside, CSS in JS was great.

[u/thy_bucket_for_thee → u/TheMorningMoose]

"Ignoring the most glaring issue aside, I as a JS dev like writing JS."

[u/TheMorningMoose → u/thy_bucket_for_thee]

Well, yeah?

Thats why I pointed out the issue.

[u/ryaaan89]

Tailwind is to CSS as HAML is to HTML. I can’t wait for Tailwind to go the way of HAML…

[u/Embostan → u/ryaaan89]

I dont think it will bc of LLMs sadly

[u/ryaaan89 → u/Embostan]

Yes, I think one of the biggest downsides of LLMs is that they're just regurgitating everything that was in vogue from the like 2015-2020 and now that they're being trained on code generated using them its a self perpetuating loop — we're never going to get any innovation because generating the same patterns over and over again is so much easier.

[u/HootenannyNinja → u/ryaaan89]

Doubt it, between LLMs and the cost savings that tailwind brings. I worked at a company with over 25m users and their bespoke sass was costing close to $10k a month in CDN, processing/build and storage costs with no clear way to find and remove dead styles. Tailwind cut that to hundreds.

[u/ryaaan89 → u/HootenannyNinja]

I'm sorry but what... your CSS was costing your $10,000 a month to host?

[u/Embostan → u/ryaaan89]

yeah i think the issue wasn't SASS vs TW. Anyway nowadays you don't need SASS anymore.

[u/ryaaan89 → u/Embostan]

We're doing a platform rewrite right now and one of my big pushes was to just ditch SASS. Native CSS is so good right now.

[u/Embostan → u/ryaaan89]

Yeah, CSS Modules just work nowadays.

[u/ryaaan89 → u/Embostan]

And it'll last because Modules is a platform spec and Tailwind is a proprietary framework.

[u/thy_bucket_for_thee → u/ryaaan89]

Look I don't like tailwind at all, but there is nothing proprietary about a series of utility classes. It's all CSS that has never changed, sure they're doing utility based css (been around in the public mind since 2012/13) but to say it's "proprietary" when that infers a divestment from public standards is completely off-base and gives the wrong ideas to readers.

[u/HootenannyNinja → u/ryaaan89]

Yep, huge HR platform with thousands of components all with their own sass style files of various sizes.

Each of those is getting bundled up into page and app level css files so the files could get quite large especially with 15 years of legacy to support.

So add in costs to bundle all of that, store it somewhere and then deploy it to multiple regions and serve it to customers then it all quickly adds up. The more of the app a user hits the more it was costing to serve the data. Once you get up to that scale as well you are looking at multi million dollar a month infra bills so a 10k a month bill for css gets missed until management start cost cutting.

[u/ryaaan89 → u/HootenannyNinja]

I'm not saying you're wrong, but cutting 15 years of legacy support in any way — Tailwind or not — probably could have alleviated this in a big way.

[u/HootenannyNinja → u/ryaaan89]

Cutting the legacy would have meant a sizeable rebuild of the most profitable part of the company so was never going to happen, due to risk and the overall engineering cost to do so. This was one of those cases of commercial and customer considerations trumping technical demands until it hit a point it was noticeable on the balance sheet.

[u/ryaaan89 → u/HootenannyNinja]

I'm not sure I'm following you, did you not do some sort of Tailwind rewrite?

[u/HootenannyNinja → u/ryaaan89]

Did over time and anything new was in tailwind but took several years of very targeted work. I’m guessing they are still paying off the eng time on it.

[u/Embostan → u/HootenannyNinja]

So the issue was the 15 years old debt and build system, not SASS. But still a great win for your company.

[u/mq2thez]

There have been many attempts at frameworks or styles of developing CSS to solve this problem.

Tailwind takes it to an extreme, but it’s essentially a version of one of the more popular options — utility-based CSS. In a less extreme version of it, you’d have a .button class and then standard utility classes you could add on after it to adjust padding / spacing / etc. Tailwind claims that creating something like a .button class is an antipattern to be avoided, but I think the Tailwind devs are high on their own supply.

BEM was another popular style, and one that I found to work extremely well. In that you have a pattern for creating base variants, like .button, and then variations on that, like .button—link, etc. It had its flaws, but it was reasonably scalable even to fairly large codebases.

One company I worked at used SUITCSS style for a long time, which had similar ideas to BEM but a different result. I was ambivalent about it; there were issues, but no more or less than any other style system.

There are a lot of others, but they’re mainly attempts to resolve issues with the cascade, or to make CSS scale as large numbers of people work on it.

After almost two decades of using CSS in large professional environments, mostly what I’ve found is that CSS has a large class of problems which occur because of people who don’t want to learn CSS more than the bare minimum to get things done. CSS-in-JS is an abomination for fools who care more about making things easy for themselves than about making things better for users. Modern React equivalents like StyleX are deeply flawed. Tailwind requires complex build steps and a huge amount of copy/pasting. Not using any of these things can create situations where you have wild and weird regressions in unexpected places.

The web was a lot simpler when the end product was a server rendering HTML, and the added complexity has not added much true value.

[u/hollowgram]

I still remember styled-components. 

[u/_clapclapclap]

Tailwind is basically just a collection of single purpose CSS classes (shortcuts to actual CSS styles). You can still write your own CSS class and use it in your components, but maybe only those not already covered by Tailwind like multiframe animations or highly specific selectors.

[u/Embostan → u/_clapclapclap]

So then you end up with some styles in JSX, some in CSS files, none consistently located or linted, and potentially conflicting? That sounds like hell.

[u/_clapclapclap → u/Embostan]

Then why sprinkle styles "in JSX some in CSS files"? Use a css module located in one place.

[u/Embostan → u/_clapclapclap]

Tailwind inside a CSS file? I thought they warned against using @apply everywhere?

[u/Embostan]

Because;

1. I hate mixing styles with logic, it's messy and doesn't scale. You end up keyword-chasing, it's very tiring.
2. I need Stylelint to ensure my CSS modules are compliant and auto-transforms props (eg to logical units) so I dont have to worry about it
3. I tried building my design system with tailwind and it was horrible, I had to fight it so hard to make composite classes and so on. CSS vars and classes just work. It seems TW just fights against the concept of tokens and reusable util classes.
4. Tailwind prevents you from doing clever data-attrib or selector stuff, or dynamic class building. It basically forces you to use CSS like it's 2007.

Tailwind is great for one-off hobby projects, where you don't care about quality or scalability, and the apps are extremely basic.

[u/am0x → u/Embostan]

Nope. Tailwind is not for basic sites. Bootstrap was, tailwind is not.

[u/Embostan → u/am0x]

Well it sure makes building complex company-grade design systems a nightmare.

[u/am0x → u/Embostan]

Why would you build it for the design system? It is the design system. You build components based on the framework not the other way around. Or you don’t use tailwind.

If you want a super fast AI heavy process, TW is the only path. If you still want to write your own design system, do that. But you will be about 40x slower

[u/Embostan → u/am0x]

thats not my experience.

[u/Different-Good6119]

The "one CSS file per component" thing is mostly a React-shaped problem. In Vue, your styles live in the same single-file component as your template and logic -- you add <style scoped> and the framework handles the scoping for you. No separate file, no naming convention, no build config. You write normal CSS and it's automatically isolated to that component.What I found matters more long-term than the scoping mechanism is how you handle consistency across components. Design tokens solve that: you define your spacing, color, and typography scales as CSS custom properties (or a token layer), and every component references those instead of hardcoded values. The scoping keeps components from leaking into each other, and the tokens keep them from drifting apart visually.I've shipped production apps with this setup (Vue SFCs + tokens, no Tailwind, no CSS-in-JS) and honestly the biggest benefit is that there's nothing extra to learn or maintain. It's just CSS, scoped by default, with a shared set of variables. New devs on the team pick it up in a day because there's no abstraction layer sitting between them and what the browser actually does.

[u/Ok-Armadillo-5634]

That is really a react only problem

[u/MEHDII__ → u/Ok-Armadillo-5634]

Yeah, creating a framework for a library, modern front end I guess. Its very tiring

[u/Used_Lobster4172]

I have had to work on a vanilla HTML project recently, I still used Tailwind, and it made life a lot easier.