Configure options below — the preview updates in real time.
Top-level configuration options for the JS config loaded via the @config directive. In v4, most settings can also be configured directly in CSS.
Glob patterns for files containing Tailwind class names. In v4, content is auto-detected so this is only needed to add paths not covered by automatic detection.
Adds a custom prefix to all generated utility classes to avoid naming conflicts (e.g. 'tw-'). In v4, you can also set this via @import "tailwindcss" prefix(tw) in CSS.
Mark all utilities with !important. Can also be a CSS selector string for scoped specificity (e.g. '#app').
Strategy for the dark: variant. 'media' uses OS preference (default in v4), 'class' or 'selector' enables manual toggling. In v4, you can also override the dark variant directly in CSS.
Register third-party plugins and custom base configuration presets. In v4, plugins can also be loaded via the @plugin directive in CSS.
Third-party or custom Tailwind plugins to inject utilities, components, or base styles.
Custom base configurations loaded instead of (or in addition to) Tailwind's defaults.
Responsive breakpoint definitions used by all responsive utilities. In v4, breakpoints can also be defined via @theme in CSS using --breakpoint-* variables.
Custom breakpoints as key-value pairs (e.g. sm → 640px, md → 768px).
Color palette configuration. Overrides Tailwind's default color scale entirely when set under theme (use theme.extend to merge). In v4, colors can also be defined via @theme in CSS using --color-* variables.
Additional custom colors merged with Tailwind's defaults. Use key-value pairs (e.g. primary → #3490dc).
Font families, sizes, weights, line heights, and letter spacing. In v4, these can also be defined via @theme in CSS using --font-*, --text-*, --font-weight-*, --leading-*, and --tracking-* variables.
Additional font family stacks as key-value pairs (e.g. sans → Inter, system-ui, sans-serif).
Additional font sizes as key-value pairs (e.g. xxs → 0.625rem).
Additional font weights as key-value pairs (e.g. semibold → 600).
Additional line height values as key-value pairs (e.g. relaxed → 1.75).
Additional letter spacing values as key-value pairs (e.g. tighter → -0.05em).
Global spacing scale used by padding, margin, width, height, gap, and more. In v4, spacing can also be defined via @theme in CSS using --spacing-* variables.
Additional spacing values as key-value pairs (e.g. 18 → 4.5rem).
Additional border radius values (e.g. 4xl → 2rem).
Additional border width values (e.g. 3 → 3px).
Box shadows, drop shadows, opacity, and z-index layers.
Additional box shadow values (e.g. soft → 0 2px 8px rgba(0,0,0,0.1)).
Additional drop shadow filter values.
Additional opacity percentage values.
Additional z-index layer values.
Transition properties, durations, timing functions, delays, animations, and keyframes.
Additional CSS transition properties (e.g. height → height).
Additional transition durations (e.g. 400 → 400ms).
Additional easing curves (e.g. in-expo → cubic-bezier(0.95, 0.05, 0.795, 0.035)).
Additional transition delay values.
Additional CSS animation shorthand values (e.g. fade-in → fadeIn 0.5s ease-out).
Background images, gradients, and cursor styles.
Additional background image/gradient values (e.g. hero → url('/img/hero.jpg')).
Additional cursor style values.
1import type { Config } from "tailwindcss";23export default {} satisfies Config;4