- Customization
- Customizing Colors
Customization
Customizing Colors
Customizing the default color palette for your project.
Default color palette
Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
But when you do need to customize your palette, you can configure your colors under the colors key in the theme section of your tailwind.config.js file:
module.exports = {
theme: {
colors: {
// Configure your color palette here
}
}
}When it comes to building a custom color palette, you can either configure your own custom colors from scratch if you know exactly what you want, or curate your colors from our extensive included color palette if you want a head start.
Using custom colors
If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'purple': '#3f3cbb',
'midnight': '#121063',
'metal': '#565584',
'tahiti': '#3ab7bf',
'silver': '#ecebff',
'bubble-gum': '#ff77e9',
'bermuda': '#78dcca',
},
},
}By default, these colors will be made available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>Don’t forget to include values like transparent and currentColor if you want to use them in your project.
Color object syntax
When your palette includes multiple shades of the same color, it can be convenient to group them together using our nested color object syntax:
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
'white': '#ffffff',
'tahiti': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
// ...
},
},
}The nested keys will be combined with the parent key to form class names like bg-tahiti-400.
Arbitrary values
If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:
<button class="bg-[#1da1f2] text-white ...">
<svg><!-- ... --></svg>
Share on Twitter
</button>Learn more in the using arbitrary values documentation.
Generating colors
If you’re wondering how to automatically generate the 50–900 shades of your own custom colors, bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating color palettes like this automatically.
We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.
Two useful tools we can recommend are Palettte and ColorBox — they won’t do the work for you but their interfaces are well-designed for doing this sort of work.
Using the default colors
If you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing tailwindcss/colors in your configuration file and choosing the colors you want to use:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by IntelliSense.
Aliasing color names
You can also alias the colors in our default palette to make the names simpler and easier to remember:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.slate,
green: colors.emerald,
purple: colors.violet,
yellow: colors.amber,
pink: colors.fuchsia,
},
},
}
This is especially common for grays, as you usually only use one set in any given project and it’s nice to be able to type bg-gray-300 instead of bg-neutral-300 for example.
Adding additional colors
If you’d like to add a brand new color to the default palette, add it in the theme.extend.colors section of your configuration file:
module.exports = {
theme: {
extend: {
colors: {
brown: {
50: '#fdf8f6',
100: '#f2e8e5',
200: '#eaddd7',
300: '#e0cec7',
400: '#d2bab0',
500: '#bfa094',
600: '#a18072',
700: '#977669',
800: '#846358',
900: '#43302b',
},
}
},
},
}You can also use theme.extend.colors to add additional shades to an existing color if it’s needed for your design:
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
}
},
},
}Disabling a default color
If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you do want:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}Naming your colors
Tailwind uses literal color names (like red, green, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like primary or danger.
That said, you can name your colors in Tailwind whatever you like, and if you’re working on a project that needs to support multiple themes for example, it might make sense to use more abstract names:
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them:
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
}
}
}Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason.
Using CSS variables
If you’re using abstract color names because you want to support multiple themes in your project, there’s a good chance you also want to use CSS variables to define your colors.
The best way to do this is to define your CSS variables as just the color channels, without including the actual color function:
@tailwind base;
@tailwind components;
@tailwind utilities;
.theme-startup {
--color-primary: 255 115 179;
--color-secondary: 238deg 35% 58%;
/* ... */
}
.theme-boring {
--color-primary: 2 82 204;
--color-secondary: 46deg 100% 50%;
/* ... */
}
.theme-elegant {
--color-primary: 192 178 131;
--color-secondary: 34deg 29% 81%;
/* ... */
}Then define your colors using either the rgb or hsl helpers which wraps the variable with the color function and applies an alpha channel if needed:
module.exports = {
theme: {
colors: ({ rgb, hsl }) => {
primary: rgb('--color-primary'),
secondary: hsl('--color-secondary'),
// ...
}
}
}This makes it possible to use Tailwind’s color opacity modifiers to do things like bg-primary/75 even when you’re using CSS variables to define your colors.