5 Tailwind CSS v4 Tips You Should Know

---

title: "5 Tailwind CSS v4 Tips You Should Know" date: "2026-05-25" description: "Tailwind v4 ships with a CSS-first configuration model. Here are five practical tips for getting the most out of it." tags: ["Tailwind CSS", "CSS", "UI"]

Tailwind CSS v4 moves configuration from a JavaScript file to pure CSS. Here are five tips to help you adapt.

1. CSS-First Configuration

Instead of tailwind.config.js, everything lives in your CSS file:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.6 0.2 250);
  --font-heading: "Inter", sans-serif;
}

2. Use @plugin for Extensions

Typography, forms, and other plugins are now loaded via @plugin:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

3. Custom Variants with @custom-variant

Define responsive or state-based variants directly in CSS:

@custom-variant dark (&:is(.dark *));
@custom-variant hover-focus (&:hover, &:focus);

4. Leverage prose Classes for MDX

When rendering Markdown content, wrap it in a prose container:

<article className="prose prose-lg dark:prose-invert max-w-none">
  <MDXContent />
</article>

5. Use oklch for Better Colors

Tailwind v4 defaults to oklch color space, which provides more perceptually uniform colors and better interpolation in gradients.

--color-primary: oklch(0.5 0.2 260);

These five changes cover most of what you'll encounter migrating from v3 to v4.