iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Custom Themes

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind theming used to mean editing tailwind.config.js. In v4 it is CSS-first - define design tokens in @theme blocks and reach them through utility classes.

Tailwind v4 theming

EXAMPLE
/* app.css - Tailwind v4 */
@import 'tailwindcss';

@theme {
  /* Colors - tokens become bg-brand, text-brand, etc. */
  --color-brand-50:  #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;

  /* Typography */
  --font-sans: 'Inter Variable', ui-sans-serif, system-ui;
  --font-mono: 'JetBrains Mono', ui-monospace;

  /* Radii + shadows */
  --radius-card: 0.75rem;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);

  /* Spacing scale extensions */
  --spacing-18: 4.5rem;
}

/* Dark mode = another @theme inside [data-theme=dark] */
[data-theme='dark'] {
  --color-brand-50:  #1e3a8a;
  --color-brand-500: #60a5fa;
  --color-brand-900: #eff6ff;
}


/* Usage - utilities work without config */
<button class='bg-brand-500 hover:bg-brand-900 text-white px-4 py-2 rounded-card shadow-card font-sans'>
  Sign up
</button>


/* Per-component override using @theme inline */
.product-card {
  --color-brand-500: var(--color-emerald-500);
}


/* For v3 users: equivalent in tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' },
      },
      borderRadius: { card: '0.75rem' },
    },
  },
};

Why it matters

Design tokens belong in the design system, not buried in component files. Tailwind v4 makes the link between token and utility direct and inspectable in DevTools. For v3 projects, mirror the same naming so a future v4 migration is a copy-paste.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
theme: { extend: { colors: { primary: { 500: '#04AA6D' } } } }
Try it Yourself »

Discussion

Loading…