Config
4 methodsKeys in the tailwind.config.js object used to customize design tokens, scanned files, and dark mode.
theme: { extend: { ... } }Customizes the default theme. Use extend to add or override tokens without replacing the defaults; top-level keys replace.
Parameters
| Name | Type | Description |
|---|---|---|
| extend | object | Object that adds/overrides colors, spacing, fonts, etc. without clobbering defaults. |
Returns
config
Example
tailwind
module.exports = {
theme: {
extend: {
colors: { brand: '#ff5722' },
spacing: { '128': '32rem' },
},
},
};content: [...paths]Array of file globs Tailwind scans to detect which classes to keep in the production build.
Parameters
| Name | Type | Description |
|---|---|---|
| paths | string[] | Glob patterns, e.g. './src/**/*.{html,js}'. |
Returns
config
Example
tailwind
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx,vue}',
'./index.html',
],
};darkMode: 'media' | 'class' | 'selector' | [selector]Controls how dark variants are applied: media (prefers-color-scheme), class (a parent .dark class), selector, or a custom selector.
Parameters
| Name | Type | Description |
|---|---|---|
| darkMode | string | string[] | Strategy: 'media' (default), 'class', 'selector', or a custom selector array. |
Returns
config
Example
tailwind
module.exports = {
darkMode: 'class',
};theme.extend.colors: { ... }Adds or overrides color tokens usable via utilities like bg-*, text-*, and border-*.
Parameters
| Name | Type | Description |
|---|---|---|
| colors | object | Map of color name to color value (or nested shades). |
Returns
config
Example
tailwind
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#ff5722',
700: '#c41c00',
},
},
},
},
};