Tailwind CSS: 10 Tips I Wish I Knew Earlier

Introduction

I was a Tailwind sceptic for longer than I'd like to admit. Utility classes in HTML felt like a step backward — wasn't this just inline styles with extra steps? After using it seriously on a few real projects, I understand why I was wrong. Tailwind isn't inline styles; it's a design system encoded as a constraint set, and once you think about it that way, the ergonomics are hard to beat.

That said, there are aspects of Tailwind that take time to discover. Some are buried in the docs, some emerge from experience, and some run counter to how most developers initially approach it. These are the ten things that genuinely changed how I use Tailwind day to day.

Tip 1: Use the @layer Directive Instead of Fighting the Cascade

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
  }

  h1, h2, h3 {
    @apply font-semibold tracking-tight;
  }
}

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

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base runs before utilities, so utilities always win. @layer components lets you build reusable component classes that can still be overridden. @layer utilities creates custom single-purpose utilities that behave like built-in Tailwind classes. This structure keeps specificity predictable.

Tip 2: Arbitrary Values Are More Powerful Than You Think

<!-- Pixel-perfect positioning -->
<div class="top-[13px] left-[calc(50%-2px)]">

<!-- Custom colours with opacity -->
<div class="bg-[#1a1a2e] text-[rgb(200,200,255)]">

<!-- CSS variables -->
<div class="bg-[var(--brand-color)]">

<!-- Arbitrary selectors -->
<div class="[&>p]:mb-4 [&_a]:text-blue-500">

The [>p] syntax is particularly useful for styling third-party content (like MDX output) where you can't control the HTML.

Tip 3: clsx + tailwind-merge Is the Correct Way to Handle Dynamic Classes

// WRONG — merging conflicts produces both classes, and only one wins
const className = "px-4" + (isLarge ? " px-8" : "");

Instead, use clsx to combine classes conditionally, and tailwind-merge to merge them into a single class.

Tip 4: Use transform for Complex Transformations

<!-- Rotating an element -->
<div class="transform rotate-45">

<!-- Scaling an element -->
<div class="transform scale-150">

<!-- Translating an element -->
<div class="transform translate-x-10">

The transform property is powerful and flexible, allowing you to combine multiple transformations.

Tip 5: Use z-index for Layering

<!-- Layering elements -->
<div class="z-10">

<!-- Layering elements -->
<div class="z-5">

The z-index property controls the stacking order of elements.

Tip 6: Use flex for Layout

<!-- Flexbox layout -->
<div class="flex items-center justify-between">

<!-- Flexbox layout -->
<div class="flex items-center justify-between">

The flex property is powerful and flexible, allowing you to create complex layouts.

Tip 7: Use grid for Grid Layout

<!-- Grid layout -->
<div class="grid grid-cols-2">

<!-- Grid layout -->
<div class="grid grid-cols-2">

The grid property is powerful and flexible, allowing you to create complex grid layouts.

Tip 8: Use space for Spacing

<!-- Spacing elements -->
<div class="space-x-4">

<!-- Spacing elements -->
<div class="space-x-4">

The space property is powerful and flexible, allowing you to create complex spacing patterns.

Tip 9: Use text for Text Styling

<!-- Text styling -->
<div class="text-bold">

<!-- Text styling -->
<div class="text-bold">

The text property is powerful and flexible, allowing you to create complex text patterns.

Tip 10: Use transform for Complex Transformations

<!-- Rotating an element -->
<div class="transform rotate-45">

<!-- Scaling an element -->
<div class="transform scale-150">

<!-- Translating an element -->
<div class="transform translate-x-10">

The transform property is powerful and flexible, allowing you to combine multiple transformations.