[mcluck]

After working with Tailwind for a period of time I came to the exact same conclusion. You can achieve all of this in a better way using CSS variables. You can transform this:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer components {
     .button {
       @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300;
     }
    }

in to this:

    .button {
      font-size: var(--text-2xl);
      padding: var(--p-2);
      background-color: var(--gray-100);
      color: var(--gray-600);
      border: solid 1px var(--gray-200);
      pointer: cursor;
    }
    .button:hover {
      background-color: var(--gray-200);
      border-color: var(--gray-300);
    }

Adjust variable names to taste. No build step, no extra tooling, just as readable in my opinion. On top of that, using CSS variables means that those values can be changed at runtime. You basically get user-driven theming for free.

I'm building an app like this right now and it's been lovely.

[zkldi]

I really like this approach - I forget CSS has native variables now (maybe it has had it for a while?) and always think of scss's $variables.

[e12e]

How do you deal with media queries/responsiveness?

[neurotrace]

I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration.

    button: {
      [MediaQueries.Medium]: ... 
    }

I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway