Level Up Your Tailwind Skills

Tailwind CSS makes it easy to build rapidly, but it's also easy to create unmaintainable "soup" of classes. Here are 5 tips to keep your codebase clean and scalable.

1. Use clsx and tailwind-merge

Stop using template literals for conditional classes. The standard for modern React apps is a cn() helper utility.

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
 
// Usage
<div className={cn("p-4 bg-red-500", isActive && "bg-blue-500")} />

This handles conflicts gracefully (e.g., bg-blue-500 will correctly override bg-red-500 without CSS cascade issues).

2. Leverage @apply for Complex Components

If you're repeating the same 20 classes for every button, extract them directly in your CSS or use a component.

/* global.css */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
  }
}

Note: In the React world, creating a <Button /> component is usually preferred over @apply.

3. Extending the Theme

Don't hardcode magic values like w-[350px]. If you need a specific width, add it to your tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

4. Semantic Colors via CSS Variables

Instead of bg-slate-900, use semantic names like bg-card or text-muted. This is exactly how shadcn/ui works.

:root {
  --primary: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
}

Then mapped in config:

colors: {
  primary: "hsl(var(--primary))",
  muted: "hsl(var(--muted))",
}

5. Peer and Group Modifiers

Style elements based on the state of their siblings or parents.

<div className="group p-4 hover:bg-gray-100">
  <h3 className="group-hover:text-blue-500">
    Hover the card to change me!
  </h3>
</div>
 
<input className="peer border" />
<p className="hidden peer-focus:block text-blue-500">
  Input is focused!
</p>

These modifiers reduce the need for JavaScript state when creating simple interactions.