Tailwind CSS
The utility-first CSS framework: you style in the markup itself with small, composable classes. With design tokens behind it (as on this site) it's speed without losing coherence.
Tailwind removes the distance between the component and its style: the classes live in the markup and describe exactly what they do. No more inventing names for every div and jumping between files. Version 4 goes further: the configuration is pure CSS, with the design system's variables as the source.
The key to keeping it from degenerating into class soup is a system behind it: on this site, Tailwind consumes the brand tokens (color, spacing, typography), so 'text-primary' always means the correct burgundy. The HTML does get more crowded, yes: that's the price of having the styles where you read them.
PROS
- Speed: you style without leaving the component
- With tokens behind it, coherence is guaranteed
- v4: configuration in native CSS, simpler
CONS
- The markup fills up with classes (harder to read at first)
- Without a design system behind it, it degenerates into loose values