- Customizing Colors
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.
Like many other places in Tailwind, the special DEFAULT key can be used when you want to define a value with no suffix:
module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}This will create classes like bg-tahiti, bg-tahiti-light, and bg-tahiti-dark.
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’d like to define your colors as CSS variables, you’ll need to define those variables as just the color channels if you want them to work with the opacity modifier syntax:
Define your CSS variables as channels with no color space function
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: 255 115 179;
--color-secondary: 111 114 185;
/* ... */
}
}
Don't include the color space function or opacity modifiers won't work
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-primary: rgb(255 115 179);
--color-secondary: rgb(111 114 185);
/* ... */
}
}
Then define your colors in your configuration file, being sure to include the color space you’re using, and the special <alpha-value> placeholder that Tailwind will use to inject the alpha value when using an opacity modifier:
module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
// Using modern `hsl`
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
// Using legacy `rgba`
primary: 'rgba(var(--color-primary), <alpha-value>)',
secondary: 'rgba(var(--color-secondary), <alpha-value>)',
}
}
}When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern space-separated syntax, and commas if using legacy functions like rgba or hsla:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* For rgb(255 115 179 / <alpha-value>) */
--color-primary: 255 115 179;
/* For hsl(198deg 93% 60% / <alpha-value>) */
--color-primary: 198deg 93% 60%;
/* For rgba(255, 115, 179, <alpha-value>) */
--color-primary: 255, 115, 179;
}
}