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

I don't recommend Tailwind CSS

en.andros.dev

Post reply on HN
Print view View original

51–60 of 179 posts

Re: I don't recommend Tailwind CSS

#51

Post by herrkanin »

I was very much in the Tailwind camp, and simultaneously loved it for its local reasoning and disliked it for how its long class names messed up my components. It has always felt like a bolted-on hack to me but I couldn't argue with the benefits.

Turns out, CSS Modules comes with the same benefits while feeling much more like a natural extension to the web platform. The only thing I thoroughly miss is functions and directives, which hopefully will land in browsers through the mixins proposal in not too long of a time.

Re: I don't recommend Tailwind CSS

#52

Post by progx »

progx wrote: post #50

if you don't like this. .button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700; } why not write it like this? .button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700 ; }

Or:

  .button {
    padding: var(--gap-s) var(--gap-m);
    background-color: var(--color-indigo);
    color: var(--color-white);
    font-weight: 700;
    border-radius: var(--gap-s);
    &:hover, &:focus {
        background-color: var(--color-indigo-hover);
    }
  }
Fair comparison (i really don't like this too):

  .button { padding: var(--gap-s) var(--gap-m); background-color: var(--color-indigo); color: var(--color-white); font-weight: 700; border-radius: var(--gap-s);    &:hover, &:focus { background-color: var(--color-indigo-hover); } }
;-)

Re: I don't recommend Tailwind CSS

#53

Post by zelphirkalt »

pixard wrote: post #29

I see you have a .button, cool! So did you load the entire context of your project into your mind, and calculate every possible iteration of kind, size, color etc this button may have? And once you did that, did you come up with a semantically correct naming scheme that is clear and will not succumb to the inevitable .button_checkout_special_page_cta_widget a particular page will end up requiring? No? Neither did I.…

I know what you mean. But somehow that doesn't bother me. In fact it forces me to think about consistency of the design and often makes me think of a more general schema and simplifications in styling, or getting rid of something too specific/special.

Re: I don't recommend Tailwind CSS

#55

Post by chrismorgan »

> It is hard to read

The hilarious thing here is that without JavaScript, the code is white-on-white, because some of the colouring is added on pre[class*="language-"], but the language-css class is only added to the pre element by JS.

Re: I don't recommend Tailwind CSS

#56

Post by progx »

progx wrote: post #50

if you don't like this. .button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700; } why not write it like this? .button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700 ; }

"Nothing stops you from using sky-400 and blue-400 in the same project. Consistency still depends on your discipline, not on the framework."

And how did plain css solve that? You're mixing up a few issues there.

Re: I don't recommend Tailwind CSS

#57

Post by michaelchisari »

KolmogorovComp wrote: post #46
Gigachad wrote: post #43

Earlier quoted context omitted.

I feel like scoped css and component libraries fixed this issue. I don’t have a .button, I just have a that has all its css self contained. And just a shared color definition file.

Same, my need for tailwind got completely ridden when I started using Svelte, thanks to the CSS-scoping it entailed.

And @scope does this for all of css.

Re: I don't recommend Tailwind CSS

#58

Post by zelphirkalt »

9dev wrote: post #10

This is such a bikeshedding debate. While you don't recommend it, projects with Tailwind work . Over years. You can onboard new developers to it, able to contribute productively immediately . Likewise, you can pick up work after months or years and don't have to remember or rediscover how your styling layer works. The conventions and class names come really naturally fast, and you can always look it up. It's just not…

I wouldn't even write such a class name. It smells like bad styling and layouting already. A CSS class should convey some semantic meaning. I would name it after the thing that should be red or green, not "red"/"green". That doesn't tell me anything. Maybe its name could be something like "danger" or "active" or something. Also the 500 looks very sus. Responsive design is best when it avoids such hardcoded numbers and depends on its content and dynamic viewport width calculations, and perhaps a few minimum sizes, if necessary to decide when things float, wrap, shrink, grow, etc.

It's a red flag (ha).

Re: I don't recommend Tailwind CSS

#59

Post by sureglymop »

My (certainly not unique) take is: As with almost everything, choose what you use based on context. There is a very wide range of websites and web applications you can make. For some of those tailwind is a good fit. For many it is not.

For my own projects, I have been perfectly fine with just one large global CSS file, extending it just when I have to. But I could this being maybe tedious when working in a large team.

Re: I don't recommend Tailwind CSS

#60

Post by bloomca »

The argument basically boils down that in non-component approach (so not a modern web framework) it is harder to reason if you use tailwind classes. The rest is some serious bikeshedding, imo.

I personally started with atomic CSS framework (that was before Tailwind, we had our own) and it has both ups and downs, but overall it is really nice to use once you learn it, and it is not really hard to do so. It does not do anything to enforce variables, but that's why you need to roll either your own layout primitive components or some classes.

Post reply on HN