Tailwind CSS Theme
Learn how to customize the default theme.
In Tailwind, the theme system controls your entire design system — including colors, spacing, typography, breakpoints, and more.
Pagedone explains this using tailwind.config.js, but in Tailwind v4, theming is now
CSS-first using @theme and CSS variables, not JS config.
// tailwind.config.js tailwind css V3
module.exports = {
theme: {
screens: {
'sm': '480px',
'md': '768px',
'lg': '976px',
'xl': '1440px',
},
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
} /* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";
@theme {
/* Screens */
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 976px;
--breakpoint-xl: 1440px;
/* Colors */
--color-blue: #1fb6ff;
--color-purple: #7e5bef;
--color-pink: #ff49db;
--color-orange: #ff7849;
--color-green: #13ce66;
--color-yellow: #ffc82c;
--color-gray-dark: #273444;
--color-gray: #8492a6;
--color-gray-light: #d3dce6;
/* Fonts */
--font-sans: Graphik, sans-serif;
--font-serif: Merriweather, serif;
/* Extend */
--spacing-128: 32rem;
--spacing-144: 36rem;
--radius-4xl: 2rem;
}
Theme structure
The theme object contains keys for 'breakpoint', 'colors',
and
'spacing', as well as a key for each customizable core plugin.
See the theme configuration reference for a complete list of theme options.
Breakpoints
The Breakpoints key lets you define custom screen sizes to control responsive behavior
across devices.
/* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";
@theme {
/* Breakpoints */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
Colors
The colors key allows you to customize the global color palette for your project.
/* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";
@theme {
/* Base Colors */
--color-transparent: transparent;
--color-black: #000;
--color-white: #fff;
/* Gray Scale */
--color-gray-100: #f7fafc;
--color-gray-200: #edf2f7;
--color-gray-300: #e2e8f0;
--color-gray-400: #cbd5e0;
--color-gray-500: #a0aec0;
--color-gray-600: #718096;
--color-gray-700: #4a5568;
--color-gray-800: #2d3748;
--color-gray-900: #1a202c;
}
Spacing
The spacingkey defines the spacing scale used for margin, padding, and layout
utilities.
/* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";
@theme {
/* Spacing Scale */
--spacing-px: 1px;
--spacing-0: 0;
--spacing-0.5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1.5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2.5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3.5: 0.875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
}
Customizing the theme
Out of the box, your project will automatically inherit the values from Tailwind CSS. If you would like to customize the default theme, you have a few different options depending on your goals.
Overriding
To override an option in the default theme, add your overrides directly under the
'theme' section of your 'input.css':
/* input.css or app.css — Tailwind CSS v4 */
@import "tailwindcss";
@theme {
/* Opacity Scale */
--opacity-0: 0;
--opacity-20: 0.2;
--opacity-40: 0.4;
--opacity-60: 0.6;
--opacity-80: 0.8;
--opacity-100: 1;
}
The official Tailwind CSS Theming
documentation helps you to understand the full overview of the theming options.