Notes

There's been another round of Tailwind criticism, this time from Tero, Jeremy, Heydon and Chris.

I get the sentiment, but still think Tailwind is awesome. However I reckon you need to use it the "right" way, which is unfortunately not how most people, or the documentation, suggest.

Here's what I recommend. Start building out your design using (semantic) HTML. Add Tailwind classes as you go to lay out the page structure and to apply a basic look and feel. By using Tailwind at this point you can stay in the HTML and quickly build up your design without needing to switch context to separate CSS files.

But! As soon as you find you are reusing the same set of classes over and over, extract them out into normal, semantic, non-Tailwind classes.

That way "inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50" becomes "btn" (or whatever) in your CSS.

And thanks to Tailwind's purge function, all the unused Tailwind classes are automatically removed, keeping your stylesheets as lean as possible.

Some people are really against this approach, but find it gives me the best of both worlds; the speed of utility classes plus the power of CSS for common, or more complex, components.

If it doesn't make sense to extract all your utility classes, just keep them! My code is littered with things like "flex flex-col align-items gap-4", and I'm fine having them around. They're clear and concise.

Remember a) Tailwind is just a tool so you can use it however you want, and b) "utility-first" doesn't have to mean "utility-always".

Edit: I notice that DaisyUI also uses this approach - very nice!