Working with Tailwind CSS every day for 2 years

I try my best to use tailwind JUST as a utility library, and really utilize the @apply postcss function. I don't want 1000 classes in my HTML, I want to make re-usable classes filled with the tailwind styles from it's utility classes.

Sorry, I keep forgetting that HN is weird with line breaks

Re-typing/re-quoting:

--------

The link literally has this:

    export const className = style({
      display: 'flex',
      flexDirection: 'column',
      selectors: {
        '&:nth-child(2n)': {
          background: 'aliceblue'
        }
      },
      '@media': {
        'screen and (min-width: 768px)': {
          flexDirection: 'row'
        }
      }
    });

Which is indistinguishable from any other CSS-in-JS which has hundreds of these one-off things scattered everywhere. With a theme somewhere exposing another hundred or so variables of varing quality. And all these solutions basically converge on Tailwind (or other utility-first CSS approaches):

    export const hero = style({
      backgroundColor: vars.color.brandd,
      color: vars.color.white,
      padding: vars.space.large
    });

is nothing more than `bg-brand color-white p-4`

But TypeScript support is definitely nice.

----

Also, well looks like a lot of people here don't like this style of CSS coding.

As someone who's been writing HTML since Netscape days, I find Tailwind/UnoCSS plus a modern web framework (React/Vue/Solid JS) the most productive way to develop websites ever.

The main thing is in a single React or Solid JS component, you can have all the code, html and styling for a component in one file or most of the time in one function even.

No more having to deal with jumping around between template and css files, having to search for where a class or a styling is defined, or trying to figure out how to structure or even name the css classes. No more having to make decisions like "Should I put this styling in this class or that class or in a classless selector."

For me, it just saves too much time to not use.

I was skeptical at first, but once I started using it, I could never go back.

The problem for me is that Mr Wathan misrepresented « Good CSS » in his essay. His examples are BAD CSS, not good CSS. He then sets out to correct a problem with CSS that HE created by writing dirt poor CSS.

`.author-bio > div > h2 { color: red } is NOT good CSS. The div part has no reason being there (why would the div change the color of the title ?). After presenting this auto-created problem, he sets out to solve it with BEM, where you need untold numbers of classes for everything. So now, CSS has a naming problem, created to solve a non-existing auto-created CSS problem. And Tailwind now solves this pseudo-problem.

Apart from this, the thing that really bugs me is that every advantage claimed (apart from one) is also non-existing because if you do your CSS right, the same claimed advantages arise in pure CSS. Design tokens ? No need for json, custom properties are all you need. Specificity ? Cascade layers, pseudo-selectors are here for you.

The only "advantage" I see is the possibility of working in one file only rather than a couple of files. And that, for me at least, is not a real advantage but only a justification for being lazy. There's no way the price of all these processes and dependencies complexity are worth the laziness-added value.