[troupo]

If you're already using a build system, then throw in Tailwind pre-processors, and you will ship only the classes and styles that are actually used on your site.

Unlike, say, Youtube which ships 2.74 megabytes of css. With amazing non-compressable unique names like .`yt-mini-app-container-view-model__loading-icon-animation` and `.yt-spec-button-shape-next--size-l.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end`.

And re-inventing utility classes, badly:

   .yt-spec-button-shape-next--size-xl .yt-spec-button-shape-next__icon{width:24px;height:24px}

    .yt-spec-button-shape-next--size-l .yt-spec-button-shape-next__icon{width:24px;height:24px}

    .yt-spec-button-shape-next--size-m .yt-spec-button-shape-next__icon{width:24px;height:24px}

    .yt-spec-avatar-shape__button--button-extra-small{width:24px;height:24px}

    etc.

And Youtube is just an example of a symptomatic issue: everywhere CSS ends up growing beyond anything reasonable, with multiple repeated and duplicated styles that everyone is afraid to touch.

Tailwind helps with this a bit: there's a fixed number of utility classes, you're supposed to use them inside components (so they are collocated, but unlike CSS-in-JS you don't write what are essentially inline styles, but chose from a fixed set of classes), and only those needed are shipped.