Customizing Colors
The theme.colors section of your tailwind.config.js file allows you to override Tailwind’s default color palette.
// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
By default these colors are automatically shared by the textColor, borderColor, and backgroundColor utilities, so the above configuration would generate classes like
t.textIndigo,
t.borderBlue,
and t.bgRed.
Nested object syntax
You can define your colors as a simple list of key-value pairs as we’ve done above, or using a nested object notation where the nested keys are added to the base color name as modifiers:
// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: {
lighter: '#b3bcf5',
default: '#5c6ac4',
dark: '#202e78',
}
}
}
}
Like many other places in Tailwind, the default key is special and means “no modifier”, so this configuration would generate classes like
t.textIndigoLighter,
t.textIndigo,
and t.textIndigoDark.
Note that you need to use dot notation to access nested colors when using the theme() function — the colors are only converted to camelCase for the actual style names.
Don’t use the dash or camel syntax to access nested color values with theme()
.btn-blue {
background-color: theme('colors.blue-500');
}
Use dot notation to access nested color values with theme()
.btn-blue {
background-color: theme('colors.blue.500');
}
Overriding the default color palette
As described in the theme documentation, if you’d like to override the default color palette, you can do so using the theme.colors section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
colors: {
indigo: '#5c6ac4',
blue: '#007ace',
red: '#de3618',
}
}
}
This will disable Tailwind’s default color palette and generate classes like
t.bgIndigo,
t.textBlue,
and t.borderRed instead.
Extending the default palette
As described in the theme documentation, if you’d like to extend the default color palette, you can do so using the theme.extend.colors section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
}
}
}
}
This will generate classes like
t.bgRegalBlue
in addition to all of Tailwind’s default colors.
Overriding a default color
If you’d like to override one of Tailwind’s default colors but preserve the rest, simply provide the new values in the theme.extend.colors section of your tailwind.config.js file.
For example, here we’ve replaced the default cool grays with a neutral gray palette:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
gray: {
'100': '#f5f5f5',
'200': '#eeeeee',
'300': '#e0e0e0',
'400': '#bdbdbd',
'500': '#9e9e9e',
'600': '#757575',
'700': '#616161',
'800': '#424242',
'900': '#212121',
}
}
}
}
}
Overriding a single shade
Since values in the theme.extend section of your config file are only merged shallowly, overriding a single shade is slightly more complicated.
The easiest option is to import the default theme and spread in the color you want to customize along with the new shade value:
// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
colors: {
blue: {
...colors.blue,
'900': '#1e3656',
}
}
}
}
}
Naming your colors
Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 100 is light and 900 is dark) by default. This ends up being fairly practical for most projects, but there are good reasons to use other naming conventions as well.
For example, if you’re working on a project that needs to support multiple themes, it might make sense to use more abstract names like primary and secondary:
// tailwind.config.js
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}
You can configure those colors explicitly like we have above, or you could even pull in Tailwind’s default colors and alias the ones you need:
// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
}
}
}
Generating custom color palettes
A common question we get is “how do I generate the 100–900 shades of my own custom colors?”.
There is a tool for that: Color Shades Generator for Tailwind CSS
Default color palette
Tailwind includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.