Utility-First CSS
Styling by stacking tiny single-purpose classes right in the markup (flex, p-4, text-sm) instead of naming rules in a stylesheet.
See it
What it is
Utility-first CSS replaces named rules with a vocabulary of tiny single-purpose classes applied in the markup: flex, gap-4, p-6, text-sm, rounded-xl. You stop inventing names like 'card__header--compact' and stop hunting through a stylesheet to find what a class does. Tailwind is the one everyone means; Tachyons and the older Atomic CSS writeups are the ancestors.
The real win is not brevity, it is constraint plus locality. Utilities come from a fixed scale (spacing steps, a type ramp, a palette), so arbitrary 13px paddings stop creeping in, and because the styles live on the element, deleting a component deletes its CSS. No orphaned rules, no stylesheet that only grows. Repetition is handled by extracting a component, not by extracting a class.
Two traps. First, resist wrapping every utility string in an @apply class on day one; that just rebuilds the naming problem you escaped. Second, the build only ships classes it can find as literal text in your source, so a class glued together at runtime (a color variable plus '-500') gets stripped and the style silently vanishes in production. Write full class names in a lookup map instead.
Ask AI for it
Restyle this component with Tailwind utility classes only: no hand-written component stylesheet and no @apply, the generated framework CSS aside. Use the default spacing, type, and color scales rather than arbitrary values, add responsive prefixes (sm:, md:, lg:) for the layout changes, and include hover, focus-visible, and dark: variants. Keep every class name a complete literal string so the build can detect it, and pull repeated groups into small reusable components instead of shared class names.