5 ms·

If you go even minimally outside the beaten path, the tailwind CSS declarations can mutate into a frankenstein monster that makes regular CSS look like a friend

If you go even minimally outside the beaten path, the tailwind CSS declarations can mutate into a frankenstein monster that makes regular CSS look like a friendly, cute koala Example: https://www.nikolailehbr.ink/blog/realistic-button-design-css https://www.nikolailehbr.ink/blog/realistic-button-design-cs... shows an "old fashioned", 90's are back-in-vogue, 3d button. Tailwind CSS for it becomes <button class="relative cursor-pointer overflow-hidden rounded-md border border-neutral-950 bg-neutral-900 px-3 py-1.5 text-neutral-100 shadow-md inset-shadow-2xs inset-shadow-neutral-600 transition-all before:absolute before:inset-0 before:bg-linear-to-b before:from-white/20 before:to-transparent hover:bg-neutral-800 active:bg-neutral-950 active:shadow-none active:inset-shadow-neutral-800"> After </button> I got eye-strain and headaches after taking over maintenance of a tailwind based website where the original developer had left the team. The class declarations are so huge with 15-30 class names in one line that you always forget where you are. Incidentally, also the top-voted discussion: https://github.com/tailwindlabs/tailwindcss/discussions/7763 https://github.com/tailwindlabs/tailwindcss/discussions/7763

micromacrofoot 1y ago
I can't believe people find even half of this acceptable, do they never use a browser inspector in their work?
- aidos 1y ago
  I do, and it’s great having the styles right there and hackable.
  - recursive 1y ago
    How can styles ever not be hackable? Inline styles always take precedence. What can ever stop you from slapping in more inline styles?
  - ericwood 1y ago
    To be fair, this is the case with any styling approach; if the style is applied to the element, it's there for you to toy with in the inspector.
  - thaumasiotes 1y ago
    Huh? You have the styles right there and hackable regardless of your tooling. That's what browser inspectors do.
  - pheres 1y ago
    No matter what you are using, they are always there, editable/hackable. However I would argue that it makes it slightly harder to make any change. You no longer have a single class with all the styles that are affecting that element. You can change the classes in the harder to read html, or override the single element. There is no longer the possibility to, for example, affect all .primary-btns.
    - phatskat 1y ago
      > You can change the classes in the harder to read html, or override the single element. There is no longer the possibility to, for example, affect all .primary-btns. Sure there is, the only thing is that instead of having 20 <button class=“primary”> tags, you have a <ButtonPrimary> component. Change the component once, and all instances get the update. This applies regardless of Tailwind. But if you’re repeating classes on the same kind of element over and over, then the question is less about how you’re styling it and more about how you’re organizing things.
- Alupis 1y ago
  If you write enough CSS for a site... eventually you end up building utility classes anyway. Now, you re-invented Tailwind... but in your own proprietary way that nobody else understands. Tailwind takes the inverse approach. The example posted by the parent above is completely unambiguous - what you see is what you get, and it's done the same way everywhere Tailwind is used. You can read the component's styles and understand what it should look like without having to do a bunch of look-ups, or alter classes which might impact other areas. So now instead of memorizing a bunch of custom classes like `pad-left-20` (because you didn't discover the `leftp-20` your colleague added 8 months ago)... you now have a standard way.
  - squidbeak 1y ago
    There's a big difference between using utility classes for utilities and using utility classes for everything.
    - 9dev 1y ago
      And here we’re on firm bike-shedding territory. Where does a utility stop being a utility and start being… a non-utility?
      - H1Supreme 1y ago
        It's less of when it becomes a "non-utility", and more that it becomes an incomprehensible mess of classes on a div.
        phatskat 1y ago
        For me, `class”btn btn-primary btn-primary—title”` says close to nothing about the underlying CSS - I have to go look that up. But `class=“rounded p-2 flex gap-2 items-center font-semibold bg-aqua-300 text-white”` actually tells me something: “this button has rounded corners, padding of 8px on all sides, it’s got flex display with a gap of 8px, items are aligned along the center of the cross axis, font weight is 500, the background is a lighter shade of aqua and the text is white.” What shade of aqua, exactly? I couldn’t tell you, but my IDE sticks a color block right next to any Tailwind color class. Is that rounded corner a radius of 6px or 8px? I don’t remember off the top of my head, but again my IDE will tell me with a quick hover of the “rounded” class. To me, the first set of classes is “incomprehensible” because those names, while semantically descriptive, tell me nothing about what the classes actually apply - they describe what they’re styling, not _how_ they’re styling it. But the long list of Tailwind classes tells me exactly what they do and how they do it, and if for some reason I need to go beyond the LSP to figure out what a class does, the Tailwind docs are miles easier to search than grepping the codebase for “.btn-primary \{“, not that I’ve run into that. In fact, the Tailwind LSP will compute selectors like “[&>div]:hover:border-2” and show you the actual generated CSS selector right in the hover window so you can see what the eventual output will be - it’s not just a dumb lookup of “m-2 is the margin 8px class”
- mejutoco 1y ago
  There was a time when not having css and html completely separate was considered sacrilege. And having html in javascript would have been a mortal sin. Eons ago I was at a job where we dynamically generated css on the server (php in that project). Anyone would have said: what about separation of concerns? Now everyone says it is best practice to have components with css, html and (gasp) Javascript all in one unit, because someone, for ex. Facebook said it (React). And the truth is it is very useful, and it is another way to structure frontend code. My point is: it is a spectrum and it can be useful to change the styling right there in the browser inspector. That works with tailwind the same as css. And with components, you can hide the repetition, although the browser will still have the repeated classes. Is this better than having css on another file with maybe some unused classes? I have done both and I can see each has pros and cons.
  - vehemenz 1y ago
    The thing is, they were never really separate. The source files were separated, sure, but the way 90% of the world did CSS, there were hidden abstractions relating the class definitions in the .css file and the DOM structure in the .html that weren't documented anywhere.
- tshaddox 1y ago
  This Chrome extension is widely recommended when using atomic CSS: https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc https://chromewebstore.google.com/detail/atomic-css-devtools...
mohsen1 1y ago
I used to be against Tailwind. Now that I've used long enough I can tell you that code is perfectly fine. I can read it and easily modify it. You can comment it out if you care <button class={cn( // layout & positioning "relative cursor-pointer overflow-hidden rounded-md", // border & background "border border-neutral-950 bg-neutral-900", // padding & text color "px-3 py-1.5 text-neutral-100", // shadows "shadow-md inset-shadow-2xs inset-shadow-neutral-600", // transition "transition-all", // background gradient positioning "before:absolute before:inset-0", // background gradient "bg-linear-to-b from-white/20 to-transparent", // hover "hover:bg-neutral-800" // active "active:bg-neutral-950 active:shadow-none active:inset-shadow-neutral-800" // disabled "disabled:opacity-50 disabled:cursor-not-allowed" )} > After </button>
- cogman10 1y ago
  Reading though this, I really have to wonder how this is better than <button style="css blob">After</button> Why make a bunch of css classes when it looks to me like the "style" will be roughly the same amount of code and readability.
  - chuckadams 1y ago
    You can override classes, not so much inline css.
    - cogman10 1y ago
      Is anyone ever going to override the "px-3" class? You can also change styles through javascript if you really want to. It just seems like we've lost the entire reason for css in the first place when every css attribute gets turned into it's own class.
      - chuckadams 1y ago
        Special cases in layout are a thing, happens a lot once you start nesting third-party widgets. So yes, there may be enough of a use-case for overriding px-3 that it wouldn't make sense to specifically omit it as a utility class -- to say nothing of it being useful as a utility class to begin with. I only sprinkle in the very occasional tailwind class via UnoCSS. I don't have the fire in me to dig trenches for either side of this battle that some people want to make all this into.
chuckadams 1y ago
Some judicious use of @apply would go a long way. But for some reason a few years ago they were actively deprecating its use, favoring the above insanity instead. Now @apply seems to be back in good graces, but I guess not everyone got the updated memo.
- cheald 1y ago
  @apply in CSS modules to compose the above sort of thing into something more semantic and readable without creating a bunch of global artifacts is definitely the way to go, IMO.
crowcroft 1y ago
Is that more or less verbose than button { position: relative; cursor: pointer; overflow: hidden; border-radius: 0.375rem; border: 1px solid #0a0a0a; background-color: #171717; padding: 6px 12px; color: #f5f5f5; box-shadow: inset 0 1px #525252, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); } button:hover { background-color: #262626; } button:active { background-color: #0a0a0a; box-shadow: inset 0 1px #262626, 0 0 #0000; } Sure, separating the code into a CSS file means it's not in your HTML but that doesn't mean it doesn't exist. Similarly you can move the button out to a component and reference that if you want to hide the code. I find it easier to locate things in the HTML broken into components because the style is co located with the object being styled. I find it much more difficult to navigate through CSS and find out what classes are doing what exactly. Especially when a project grows over a long period of time and different people write CSS differently (and throw a few !important's in to make sure they can meet a deadline). Each to their own though.
- jakelazaroff 1y ago
  It's not quite apples-to-apples because the Tailwind code is using design tokens and the CSS is not. You should (for example) replace the long `box-shadow` value with `var(--shadow-md)`. Anyway, to me this question is kind of like asking "Is it easier to break your writing into paragraphs, or write everything in one long block?" Like, what would you think if I formatted my comment like this? > It's not quite apples-to-apples because the Tailwind code is using design tokens and the CSS is not. You should (for example) replace the long `box-shadow` value with `var(--shadow-md)`. Anyway, to me this question is kind of like asking "Is it easier to break your writing into paragraphs, or write everything in one long block?" Like, what would you think if I formatted my comment like this?
  - pyman 1y ago
    This isn't something a web developer should be doing in 2025. The styling should be generated by the software used to design the UI. Why aren't the companies building design tools solving this?
deleted 1y ago
[deleted]
- jakelazaroff 1y ago
  > "inset-shadow-neutral-800" is going to be the same across every component, and you get to tap into it without having to create or extend your own classes with upstream CSS variables. Something like Open Props [1] gives you this without having to buy into a whole DSL and build system. [1] https://open-props.style https://open-props.style
827a 1y ago
There's a lot of people, including oftentimes the tailwind dev(s?) themself, who view Tailwind as a replacement for both CSS and Components. I think this is an L take. Tailwind is a solid replacement for 99% of the CSS you'll have to write. Its not a replacement for components. It makes components better. Just wrap that monstrosity in a component; at that point I'm not sure why it matters. Have you ever looked at the component definition for an @mui/material button? Its a cthuluian insanity. The people who maintain that library likely need therapy every week just to remain functional humans. And, I thank them deeply for their service, because I so rarely have to look at those innards; they just work from the outside.
roguecoder 1y ago
The power of CSS is that it can capture semantics. Tailwind gives up on all of that.
- zaphar 1y ago
  What? Since when did CSS become about capturing semantics? That's what the Html elements are for. CSS is about the presentation.
- phatskat 1y ago
  I’m a bit lost on this point - can you give an example of CSS capturing semantics?
seanwilson 1y ago
I see buttons used as an example a lot but buttons are one of the most style heavy elements on many websites and are only a single element so it's not a good comparison imo. For a lot of pages, you're often only adding maybe 1 to 5 styles to each element to change some flexbox settings, add some margin, set a background color, or change a font. With the traditional CSS approach, you're forced to come up with class names for each element and put the styling into a separate file, which makes iterating on style and layout really laborious compared to Tailwind. That's a much bigger benefit to focus on rather than looking at how (single element) buttons are styled. It's not like the CSS for styled buttons is less verbose or even pretty either.
sixtyj 1y ago
Last days I have spent with Tailwind. But honestly, even if I know all abbreviations now :), and it it eye-bleeding syntax, is there something better in the wild? I know that I could use vanilla CSS, but… how many times do you have enough time to build your own CMS when you can install WP… life is short. Most of us are not building a sustainable system that will be here in next 20 years. Life is short. Deliver fast.

micromacrofoot 1y ago

I can't believe people find even half of this acceptable, do they never use a browser inspector in their work?

aidos 1y ago
I do, and it’s great having the styles right there and hackable.
- recursive 1y ago
  How can styles ever not be hackable? Inline styles always take precedence. What can ever stop you from slapping in more inline styles?
- ericwood 1y ago
  To be fair, this is the case with any styling approach; if the style is applied to the element, it's there for you to toy with in the inspector.
- thaumasiotes 1y ago
  Huh? You have the styles right there and hackable regardless of your tooling. That's what browser inspectors do.
- pheres 1y ago
  No matter what you are using, they are always there, editable/hackable. However I would argue that it makes it slightly harder to make any change. You no longer have a single class with all the styles that are affecting that element. You can change the classes in the harder to read html, or override the single element. There is no longer the possibility to, for example, affect all .primary-btns.
  - phatskat 1y ago
    > You can change the classes in the harder to read html, or override the single element. There is no longer the possibility to, for example, affect all .primary-btns. Sure there is, the only thing is that instead of having 20 <button class=“primary”> tags, you have a <ButtonPrimary> component. Change the component once, and all instances get the update. This applies regardless of Tailwind. But if you’re repeating classes on the same kind of element over and over, then the question is less about how you’re styling it and more about how you’re organizing things.
Alupis 1y ago
If you write enough CSS for a site... eventually you end up building utility classes anyway. Now, you re-invented Tailwind... but in your own proprietary way that nobody else understands. Tailwind takes the inverse approach. The example posted by the parent above is completely unambiguous - what you see is what you get, and it's done the same way everywhere Tailwind is used. You can read the component's styles and understand what it should look like without having to do a bunch of look-ups, or alter classes which might impact other areas. So now instead of memorizing a bunch of custom classes like `pad-left-20` (because you didn't discover the `leftp-20` your colleague added 8 months ago)... you now have a standard way.
- squidbeak 1y ago
  There's a big difference between using utility classes for utilities and using utility classes for everything.
  - 9dev 1y ago
    And here we’re on firm bike-shedding territory. Where does a utility stop being a utility and start being… a non-utility?
    - H1Supreme 1y ago
      It's less of when it becomes a "non-utility", and more that it becomes an incomprehensible mess of classes on a div.
      - phatskat 1y ago
        For me, `class”btn btn-primary btn-primary—title”` says close to nothing about the underlying CSS - I have to go look that up. But `class=“rounded p-2 flex gap-2 items-center font-semibold bg-aqua-300 text-white”` actually tells me something: “this button has rounded corners, padding of 8px on all sides, it’s got flex display with a gap of 8px, items are aligned along the center of the cross axis, font weight is 500, the background is a lighter shade of aqua and the text is white.” What shade of aqua, exactly? I couldn’t tell you, but my IDE sticks a color block right next to any Tailwind color class. Is that rounded corner a radius of 6px or 8px? I don’t remember off the top of my head, but again my IDE will tell me with a quick hover of the “rounded” class. To me, the first set of classes is “incomprehensible” because those names, while semantically descriptive, tell me nothing about what the classes actually apply - they describe what they’re styling, not _how_ they’re styling it. But the long list of Tailwind classes tells me exactly what they do and how they do it, and if for some reason I need to go beyond the LSP to figure out what a class does, the Tailwind docs are miles easier to search than grepping the codebase for “.btn-primary \{“, not that I’ve run into that. In fact, the Tailwind LSP will compute selectors like “[&>div]:hover:border-2” and show you the actual generated CSS selector right in the hover window so you can see what the eventual output will be - it’s not just a dumb lookup of “m-2 is the margin 8px class”
mejutoco 1y ago
There was a time when not having css and html completely separate was considered sacrilege. And having html in javascript would have been a mortal sin. Eons ago I was at a job where we dynamically generated css on the server (php in that project). Anyone would have said: what about separation of concerns? Now everyone says it is best practice to have components with css, html and (gasp) Javascript all in one unit, because someone, for ex. Facebook said it (React). And the truth is it is very useful, and it is another way to structure frontend code. My point is: it is a spectrum and it can be useful to change the styling right there in the browser inspector. That works with tailwind the same as css. And with components, you can hide the repetition, although the browser will still have the repeated classes. Is this better than having css on another file with maybe some unused classes? I have done both and I can see each has pros and cons.
- vehemenz 1y ago
  The thing is, they were never really separate. The source files were separated, sure, but the way 90% of the world did CSS, there were hidden abstractions relating the class definitions in the .css file and the DOM structure in the .html that weren't documented anywhere.
tshaddox 1y ago
This Chrome extension is widely recommended when using atomic CSS: https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc https://chromewebstore.google.com/detail/atomic-css-devtools...

mohsen1 1y ago

I used to be against Tailwind. Now that I've used long enough I can tell you that code is perfectly fine. I can read it and easily modify it. You can comment it out if you care <button class={cn( // layout & positioning "relative cursor-pointer overflow-hidden rounded-md", // border & background "border border-neutral-950 bg-neutral-900", // padding & text color "px-3 py-1.5 text-neutral-100", // shadows "shadow-md inset-shadow-2xs inset-shadow-neutral-600", // transition "transition-all", // background gradient positioning "before:absolute before:inset-0", // background gradient "bg-linear-to-b from-white/20 to-transparent", // hover "hover:bg-neutral-800" // active "active:bg-neutral-950 active:shadow-none active:inset-shadow-neutral-800" // disabled "disabled:opacity-50 disabled:cursor-not-allowed" )} > After </button>

cogman10 1y ago
Reading though this, I really have to wonder how this is better than <button style="css blob">After</button> Why make a bunch of css classes when it looks to me like the "style" will be roughly the same amount of code and readability.
- chuckadams 1y ago
  You can override classes, not so much inline css.
  - cogman10 1y ago
    Is anyone ever going to override the "px-3" class? You can also change styles through javascript if you really want to. It just seems like we've lost the entire reason for css in the first place when every css attribute gets turned into it's own class.
    - chuckadams 1y ago
      Special cases in layout are a thing, happens a lot once you start nesting third-party widgets. So yes, there may be enough of a use-case for overriding px-3 that it wouldn't make sense to specifically omit it as a utility class -- to say nothing of it being useful as a utility class to begin with. I only sprinkle in the very occasional tailwind class via UnoCSS. I don't have the fire in me to dig trenches for either side of this battle that some people want to make all this into.

chuckadams 1y ago

Some judicious use of @apply would go a long way. But for some reason a few years ago they were actively deprecating its use, favoring the above insanity instead. Now @apply seems to be back in good graces, but I guess not everyone got the updated memo.

cheald 1y ago
@apply in CSS modules to compose the above sort of thing into something more semantic and readable without creating a bunch of global artifacts is definitely the way to go, IMO.

crowcroft 1y ago

Is that more or less verbose than button { position: relative; cursor: pointer; overflow: hidden; border-radius: 0.375rem; border: 1px solid #0a0a0a; background-color: #171717; padding: 6px 12px; color: #f5f5f5; box-shadow: inset 0 1px #525252, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent); } button:hover { background-color: #262626; } button:active { background-color: #0a0a0a; box-shadow: inset 0 1px #262626, 0 0 #0000; } Sure, separating the code into a CSS file means it's not in your HTML but that doesn't mean it doesn't exist. Similarly you can move the button out to a component and reference that if you want to hide the code. I find it easier to locate things in the HTML broken into components because the style is co located with the object being styled. I find it much more difficult to navigate through CSS and find out what classes are doing what exactly. Especially when a project grows over a long period of time and different people write CSS differently (and throw a few !important's in to make sure they can meet a deadline). Each to their own though.

jakelazaroff 1y ago
It's not quite apples-to-apples because the Tailwind code is using design tokens and the CSS is not. You should (for example) replace the long `box-shadow` value with `var(--shadow-md)`. Anyway, to me this question is kind of like asking "Is it easier to break your writing into paragraphs, or write everything in one long block?" Like, what would you think if I formatted my comment like this? > It's not quite apples-to-apples because the Tailwind code is using design tokens and the CSS is not. You should (for example) replace the long `box-shadow` value with `var(--shadow-md)`. Anyway, to me this question is kind of like asking "Is it easier to break your writing into paragraphs, or write everything in one long block?" Like, what would you think if I formatted my comment like this?
- pyman 1y ago
  This isn't something a web developer should be doing in 2025. The styling should be generated by the software used to design the UI. Why aren't the companies building design tools solving this?

deleted 1y ago

[deleted]

jakelazaroff 1y ago
> "inset-shadow-neutral-800" is going to be the same across every component, and you get to tap into it without having to create or extend your own classes with upstream CSS variables. Something like Open Props [1] gives you this without having to buy into a whole DSL and build system. [1] https://open-props.style https://open-props.style

827a 1y ago

There's a lot of people, including oftentimes the tailwind dev(s?) themself, who view Tailwind as a replacement for both CSS and Components. I think this is an L take. Tailwind is a solid replacement for 99% of the CSS you'll have to write. Its not a replacement for components. It makes components better. Just wrap that monstrosity in a component; at that point I'm not sure why it matters. Have you ever looked at the component definition for an @mui/material button? Its a cthuluian insanity. The people who maintain that library likely need therapy every week just to remain functional humans. And, I thank them deeply for their service, because I so rarely have to look at those innards; they just work from the outside.

roguecoder 1y ago

The power of CSS is that it can capture semantics. Tailwind gives up on all of that.

zaphar 1y ago
What? Since when did CSS become about capturing semantics? That's what the Html elements are for. CSS is about the presentation.
phatskat 1y ago
I’m a bit lost on this point - can you give an example of CSS capturing semantics?

seanwilson 1y ago

I see buttons used as an example a lot but buttons are one of the most style heavy elements on many websites and are only a single element so it's not a good comparison imo. For a lot of pages, you're often only adding maybe 1 to 5 styles to each element to change some flexbox settings, add some margin, set a background color, or change a font. With the traditional CSS approach, you're forced to come up with class names for each element and put the styling into a separate file, which makes iterating on style and layout really laborious compared to Tailwind. That's a much bigger benefit to focus on rather than looking at how (single element) buttons are styled. It's not like the CSS for styled buttons is less verbose or even pretty either.

sixtyj 1y ago

Last days I have spent with Tailwind. But honestly, even if I know all abbreviations now :), and it it eye-bleeding syntax, is there something better in the wild? I know that I could use vanilla CSS, but… how many times do you have enough time to build your own CMS when you can install WP… life is short. Most of us are not building a sustainable system that will be here in next 20 years. Life is short. Deliver fast.