Theming With @theme and Config
Extend Tailwind's design tokens for your brand.
Syntax
@theme { --color-brand: #06B6D4; }Tailwind v4 lets you define design tokens as CSS variables inside a @theme block, so custom colors and sizes become first-class utilities.
@import "tailwindcss";
@theme {
--color-brand: #06B6D4;
}That makes bg-brand and text-brand available everywhere. With the Play CDN you can also extend the theme through a small config script, as shown in the example.
Example
Loading editor…
Press Run to see the result.
When to use it
- A design team maps their brand primary color to text-brand and bg-brand by extending colors in tailwind.config.js.
- A developer adds a custom font family to the Tailwind theme so font-display is available as a utility throughout the project.
- A product adds an extra-wide 1400px breakpoint called 2xl to the screens config so the layout can target ultra-wide monitors.
More examples
Extend brand color
Extending the colors object adds bg-brand-500, text-brand-50, etc. as real utility classes without replacing Tailwind's built-in palette.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a5f',
},
},
},
},
}Custom font family
Adding fontFamily entries makes font-display and font-body available as utility classes, applying the custom typeface stacks.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
display: ['Cal Sans', 'sans-serif'],
body: ['Inter', 'sans-serif'],
},
},
},
}CSS custom property theme (v4)
Tailwind v4's @theme block lets you define design tokens as CSS custom properties, automatically generating utility classes for each token.
@import "tailwindcss";
@theme {
--color-brand: #6366f1;
--font-display: 'Cal Sans', sans-serif;
--spacing-18: 4.5rem;
}
Discussion