Back to blog
Tailwind CSSDesign SystemsCSS

Building a Design System with Tailwind CSS v4

8 min read

Tailwind CSS v4 drops the JavaScript config file in favor of CSS-native configuration. This is a significant shift — and a better one. Here's how I've adapted my design system workflow.

CSS variables as design tokens

Define all tokens in :root. Tailwind v4 picks them up automatically. No more tailwind.config.js for colors — just CSS.

:root {
  --color-brand: #a855f7;
  --color-surface: #0d0d0d;
  --radius-card: 1rem;
}

Semantic color aliases

Alias semantic names to primitive tokens. This keeps components decoupled from specific values and makes theming straightforward.

Component variants with cva

Use class-variance-authority (cva) to define variant maps. It pairs perfectly with Tailwind and eliminates conditional className logic.

import { cva } from 'class-variance-authority'

const button = cva('px-4 py-2 rounded-full font-medium', {
  variants: {
    intent: {
      primary: 'bg-brand text-white',
      ghost: 'border border-white/10 text-white/70',
    },
  },
})

Tailwind v4 makes CSS-first design systems natural. Embrace the new model — the tooling is faster, the config is simpler, and your design tokens live where they belong: in CSS.

All postsMarch 18, 2026

More posts