Tailwind CSS Tips & Tricks

After building dozens of projects with Tailwind CSS, I've accumulated a collection of tips that dramatically speed up my workflow. These aren't in the docs — they're hard-won lessons from real projects.

1. Use @apply Sparingly

It's tempting to create custom classes with @apply for everything, but this defeats Tailwind's purpose. Reserve @apply for truly repeated patterns like button variants or card styles. For most components, keep utilities inline — that's where Tailwind's power lies.

2. The Group & Peer Modifiers

These are game-changers for interactive UI. Instead of writing JavaScript for hover states on parent elements, use group and group-hover::

<div class="group cursor-pointer">
  <img class="group-hover:scale-110 transition-transform" />
  <div class="group-hover:opacity-100 opacity-0 transition-opacity">
    Overlay content
  </div>
</div>

3. Arbitrary Values for Precision

When Tailwind's spacing scale doesn't have exactly what you need, use arbitrary values: w-[237px], bg-[#1a1a2e], grid-cols-[1fr_2fr_1fr]. This gives you the flexibility of custom CSS with the consistency of utility classes.

4. Container Queries (New!)

Tailwind 3.4+ supports container queries with @container. This is revolutionary for component-based design — your components can respond to their container's size rather than the viewport:

<div class="@container">
  <div class="@lg:flex @lg:gap-8 block space-y-4">
    <!-- Layout adapts to container width -->
  </div>
</div>

5. Dark Mode Made Easy

Tailwind's dark mode with the class strategy gives you full control. Combine it with CSS variables for maximum flexibility. Design your dark theme first, then add light mode — it's easier to go from dark to light than the reverse.

Tailwind isn't just a CSS framework — it's a design system accelerator. Master these patterns and you'll build beautiful interfaces in half the time.