Tailwind CSS Without the Bloat

The Tailwind Honeymoon Ends

Tailwind is fantastic for prototyping. You get pixel-perfect designs without switching files, and the learning curve is gentle. But after a few months, the cracks show: 40-class strings, duplicated patterns, and components that are hard to read.

Here's how to keep it sustainable.

1. Group Classes by Concern

Don't let classes pile up in a random order. Group them mentally: layout, spacing, typography, color, state.

<button className="
  inline-flex items-center gap-2
  px-4 py-2
  text-sm font-semibold
  bg-orange-500 text-white
  rounded-full
  hover:bg-orange-600
  disabled:opacity-50
">

Even if you write it on one line, keeping this mental order makes diffs cleaner and reviews faster.

2. Extract Components, Not Utility Classes

The temptation is to make a .btn-primary CSS class. Don't. Instead, extract a React component.

export function PrimaryButton({ children, ...props }) {
  return (
    <button
      {...props}
      className="rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600"
    >
      {children}
    </button>
  );
}

This keeps the utility-first mindset but gives you a single source of truth.

3. Use Your Design Tokens

Instead of hard-coding colors like bg-gray-50, use semantic tokens defined in your config: bg-muted, bg-card, text-muted-foreground. They adapt to dark mode automatically and reflect design intent, not implementation.

4. Avoid Arbitrary Values When Possible

w-[247px] works, but it's a smell. It means your spacing scale doesn't cover your design, or you're eyeballing. Try to find a scale value that works, or update the scale.

Arbitrary values are fine for true one-offs (hero background images, exact gradient stops). They're a problem when they multiply.

5. Let Prettier Sort Your Classes

Install prettier-plugin-tailwindcss. It reorders classes to a canonical order automatically, so code reviewers never have to argue about class order and diffs are minimal.

The Bottom Line

Tailwind doesn't have to become unreadable. Treat className like any other code: group it, extract when repetition shows up, and use your design tokens. The framework rewards discipline.