Frontend
What is Utility-First CSS?
A CSS methodology that composes designs from small single-purpose classes like flex, pt-4, and text-center directly in markup.
Definition
Utility-first CSS, popularized by Tailwind CSS, replaces semantic class names and handwritten stylesheets with atomic classes that each set one property. Because the utility set is finite, CSS output plateaus as a project grows—Tailwind's JIT compiler emits only the classes actually used, typically under 10 kB gzipped. The tradeoff is verbose HTML, mitigated by component abstraction in React, Vue, or Svelte. It contrasts with BEM and CSS-in-JS by pushing design constraints (spacing scale, color palette) into a shared config, which doubles as a lightweight design-token system.