Skip to main content
Back to Blog
Tailwind CSSReactCSS

Tailwind CSS Best Practices for React Projects

5 min read

Clean and maintainable Tailwind CSS patterns for large-scale React projects — from component variants to responsive layout strategies.

Tailwind CSS has become the go-to styling solution for React developers — and for good reason. Its utility-first approach keeps styles close to markup, eliminates class name conflicts, and produces tiny production bundles. But as projects grow, messy Tailwind code is easy to write. Here are the practices I use on every React project to keep Tailwind clean and maintainable.

1. Always Use a Class Sorter

The single best habit you can build is consistent class ordering. Install the official Prettier plugin for Tailwind CSS — it automatically sorts your utility classes into a logical order every time you save.

npm install -D prettier-plugin-tailwindcss

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

Consistent ordering means you spend zero mental energy deciding where flex goes relative to mt-4. Your diffs become easier to read in code review too.

2. Use clsx or cn for Conditional Classes

Avoid template literals for conditional classes — they get unreadable fast. Instead, useclsx combined with tailwind-merge (commonly wrapped in a cn helper).

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

<button className={cn(
  "px-4 py-2 rounded-lg font-medium transition-colors",
  isActive && "bg-primary text-dark",
  isDisabled && "opacity-50 cursor-not-allowed"
)}>Click me</button>

3. Extract Components, Not @apply

When you find yourself repeating the same classes across your codebase, extract a React component instead of reaching for @apply. Components give you props, TypeScript types, and true reusability.

4. Design Your Spacing Scale in tailwind.config

Arbitrary values like mt-[13px] are a code smell. Define your brand spacing, colours, and font sizes in tailwind.config.ts so every design decision is a named token.

Key Takeaways

  • ▸Install prettier-plugin-tailwindcss — consistent class order is free
  • ▸Use cn() with tailwind-merge for all conditional classes
  • ▸Extract React components instead of using @apply
  • ▸Define design tokens in tailwind.config.ts — avoid arbitrary values
  • ▸Always write mobile-first — base styles for small, breakpoints to enhance

Tailwind CSS rewards consistency. The more intentional you are about these patterns from day one, the easier your codebase becomes to maintain at scale. Happy styling!