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.