Tailwind CSS Tips for Cleaner Code

Tailwind CSS is incredibly powerful, but without organization, your HTML can become an unreadable mess. Here's how I keep things clean.

1. Consistent Class Ordering

I follow a consistent order for classes:

1. Layout (flex, grid, position)
2. Sizing (w-, h-, max-w-)
3. Spacing (p-, m-, gap-)
4. Typography (text-, font-)
5. Colors (bg-, text-, border-)
6. Effects (shadow-, opacity-)
7. Transitions (transition-, duration-)

2. Extract Components

If you're copying the same set of classes more than twice, it's time to extract a component.

3. Use @apply Sparingly

The @apply directive lets you compose utility classes in CSS. Use it for base styles that rarely change, but don't overuse it.

4. Leverage the Config

Extend your tailwind.config.js to add project-specific values for colors, fonts, and spacing.

5. Use Prettier Plugin

The Tailwind Prettier plugin automatically sorts your classes. Install it and never think about class order again.