For example, my component uses something like this:

.btn-indigo { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; }

In the end, I get a <button class="_1aZeRTY"> or similar and that's it, no mess. All of it gets compiled down, and any Tailwind classes I don't use don't make it into the final .js file

The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonomy to choose the css "framework" I would probably opt for something like `rebass` https://rebassjs.org/

Tailwind simplifies them and make those things more readable as well as visible. Combine that with postcss, you get ton of functionality via plugins.

You can use tailwind in any project. The end result is pretty minimal after purging unlike bootstrap or traditional CSS frameworks. Think of tailwind as high level styling framework that simplifies many common scenarios you tackle with writing few lines of CSS.

I've also used it for other various sites in the past.

Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.

In the past, a lot of projects I've seen started with Bootstrap + maybe some theme. Then they slowly add custom stuff that ended up being horribly bloated and impossible to refactor well. With Tailwind, so long as you're using @apply properly, or a decent component system (I prefer Svelte), then it's very easy to keep things in a nicely updated, non-custom design.

I would be interested in your setup (I generally use sapper).

As an aside, can Svelte reactivity add Tailwind classes? For instance class={`color-blue-${someNum}`} or does all that need to be available at build time (I'm assuming the latter).