CodePark/ questions / CSS architecture & tooling
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › CSS architecture & tooling

What are the trade-offs of utility-first CSS such as Tailwind?

<button class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-2">
  Save
</button>

Utility-first CSS styles elements by combining small single-purpose classes directly in the markup. For example, px-4 only sets horizontal padding.

Benefits:

  • You rarely name things or switch files.
  • Styles sit next to the component they style.
  • The config enforces the design scale: spacing, colours and breakpoints.
  • The CSS stops growing with the app, because utilities are reused. The build only outputs classes that appear in your source.
  • Deleting a component deletes its styles, so no dead CSS is left behind.

Costs:

  • Class lists are long and noisy, so they are harder to scan.
  • There is a vocabulary to learn.
  • You repeat class lists unless you extract components.
  • Very custom or dynamic styles can be awkward.
  • The build can't detect class names built by joining strings, like "bg-" + color.

It works best in component-based apps, where the component, not a class name, is the unit of reuse.

  • Utility-first CSS combines single-purpose classes in the markup.
  • It gives consistent design tokens, no naming and small CSS output.
  • Its costs are noisy markup, a learning curve and repetition.
  • Class names built from strings break detection. It works best with components.