Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS's problems are Tailwind's problems

colton.dev

Post reply on HN
Print view View original

41–50 of 179 posts

Re: CSS's problems are Tailwind's problems

#41

Post by wwweston »

cogman10 wrote: post #20
mohsen1 wrote: post #10

Earlier quoted context omitted.

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 After

Reading though this, I really have to wonder how this is better than After 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.

You’re correct in the sense that they’re both big noisy blobs that dilute semantic/functional signals.

You’re neglecting the design system work that goes into tailwind classes. I don’t particularly like its choices (and generally consider tailwind to be a minimal local maximum for a set of tradeoffs deserving of faint praise), but they’re something, and in an engineering culture that won’t adopt a better mindset or better tooling, it’s something that solves a few problems well enough.

Re: CSS's problems are Tailwind's problems

#42

Post by douglee650 »

cogman10 wrote: post #20
mohsen1 wrote: post #10

Earlier quoted context omitted.

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 After

Reading though this, I really have to wonder how this is better than After 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.

I am a convert, once you get the hang of the configurability it's very good (Tailwind 4). You don't have to go to separate files which is more streamlined, esp when doing in React.

I like to format in logical chunks per line, for example here's a pretty complex grid setup that is easy to adjust in the template:

    ----
    
      
    ----

Re: CSS's problems are Tailwind's problems

#43

Post by freddydumont »

I have come to the same conclusion as the OP: people like tailwind not for its API or ergonomics but for its design system.

Tailwind can actually be decent for templating systems and it’s likely why it’s shipped with Phoenix for example.

But for React components, it’s definitely a step back from CSS-in-JS, which gave you style encapsulation out of the box. Not sure what’s up with the knee-jerk reaction against it in the comments. With vanilla-extract (mentioned in the OP) or PandaCSS, there is no runtime at all.

Just components that defined their structure and style, in a readable way, with less abstraction than Tailwind.

Re: CSS's problems are Tailwind's problems

#44

Post by directmusic »

Say what you want about Tailwind's usefulness, but the author's claim in the section titled "Rule sets" is objectively false. In the Tailwind documentation they mention the @apply directive which allows you to use Tailwind's styles in your primary stylesheet.

Here is the portion of the documentation which talks about this: https://tailwindcss.com/docs/functions-and-directives#apply-...

In my own project, I moved to Tailwind recently and found @apply to be very useful. I experiment with the inline styles and move them to a CSS class when (and if) needed. Additionally, the Tailwind CLI translates the states like hover: and active: as well. I personally have found it super convenient.

Re: CSS's problems are Tailwind's problems

#45

Post by jackdh »

pier25 wrote: post #17
jackdh wrote: post #2

I used to be a naysayer of tailwind. However after getting practically forced into it I'm now drinking the koolaid. Yes things like having to duplicate styles using multi cursor is kind of silly, however for the vast majority of the time, having the styles written clearly each time, for me, makes it worth it. There is also nothing stopping you mixing and matching.

> There is also nothing stopping you mixing and matching. Yes, common sense. Having multiple approaches to solve the same thing tends to be a bad idea.

My point is that there is no one CSS library to rule them all and likely never will be. The closest to that is going back to pure raw CSS which I highly doubt people will do.

And yes while it's obviously not ideal to have a hundred competing libraries in your code, you can create what works for you / your team.

Re: CSS's problems are Tailwind's problems

#46

Post by ahuth »

Can't agree that Tailwind is popular because it forces you to setup a centralized config file (although I guess that is nice).

It's because, as ugly as a long line of inline classes can be, it's easy to know exactly what styles are being applied to an element. Especially when there are more than 1 or 2 devs writing styles.

Re: CSS's problems are Tailwind's problems

#47

Post by ipsento606 »

I've been working on a nativewind [1] app for the last year or so, and all these complaints resonate with me, and then some.

It feels like I have to have a mental model of CSS, tailwind, React Native stylesheets and nativewind-specific conventions to actually accomplish anything. It's terrible.

I agree with the author that the only actually good part is having a single, easy-to-use list of global style constants.

Everything else sucks.

[1] https://www.nativewind.dev/

Re: CSS's problems are Tailwind's problems

#49

Post by jakelazaroff »

crowcroft wrote: post #22
lenkite wrote: post #4

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-cs... shows an "old fashioned", 90's are back-in-vogue, 3d button. Tailwind CSS for it becomes After I got eye-strain and headaches after taking over maintenance of a tailwind ba…

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…

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?

Re: CSS's problems are Tailwind's problems

#50

Post by [deleted] »

lenkite wrote: post #4

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-cs... shows an "old fashioned", 90's are back-in-vogue, 3d button. Tailwind CSS for it becomes After I got eye-strain and headaches after taking over maintenance of a tailwind ba…

[deleted]
Post reply on HN