Tailwind CSS Config Guide

Why v4 Changed Everything

In Tailwind v3, you configured the framework in a JavaScript file:

// tailwind.config.js (v3 — no longer needed)
module.exports = {
    theme: {
        extend: {
            colors: {
                brand: '#3b82f6'
            }
        }
    }
}

In v4, that same config lives directly in CSS:

@import "tailwindcss";

@theme {
    --color-brand: #3b82f6;
}

Same result, less friction. Your theme values are now real CSS variables you can use anywhere.

Custom Colors

@theme {
    --color-brand: #3b82f6;
    --color-brand-light: #93c5fd;
    --color-brand-dark: #1e40af;
    --color-accent: oklch(0.7 0.2 340);
}

Now you can use these anywhere:

<button class="bg-brand hover:bg-brand-dark text-white">
    Button
</button>
<p class="text-brand-light">Subtle text</p>

Custom Fonts

@theme {
    --font-display: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

Use them with font-display and font-mono:

<h1 class="font-display text-4xl">Heading</h1>
<code class="font-mono text-sm">const x = 1;</code>

Custom Spacing

@theme {
    --spacing-18: 4.5rem;
    --spacing-128: 32rem;
    --spacing-200: 50rem;
}

Now p-18, m-128, and w-200 all work. This is especially useful for custom container widths and vertical rhythm.

Custom Breakpoints

@theme {
    --breakpoint-xs: 30rem;
    --breakpoint-3xl: 120rem;
}

Now you can use xs: and 3xl: prefixes just like the built-in md: and lg::

<div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 3xl:grid-cols-6">
    ...
</div>

Custom Animations

@theme {
    --animate-fade-in: fade-in 0.3s ease-out;
    --animate-slide-up: slide-up 0.4s ease-out;

    @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slide-up {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}

Use them with the animate- prefix:

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>