Customizing the default sidebar & topbar color palette for your project.
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.
If you’re wondering how we automatically generated the 50–950 shades of each color, bad news — color is complicated and to get the absolute best results 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.
If you are creating your own custom color palette and don’t feel confident doing it by hand, UI Colors is a great tool that can give you a good starting point based on any custom color.
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: {
extend: {
colors: {
custom: {
'50': '#f5f4fe',
'100': '#eeecfb',
'200': '#dddbf9',
'300': '#c4bef4',
'400': '#a699ec',
'500': '#8066e1',
'600': '#7550d7',
'700': '#663ec3',
'800': '#5534a3',
'900': '#472c86',
'950': '#2b1b5a',
},
},
},
}
}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:
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
extend: {
colors: {
'body': colors.slate[800], //text-color
'body-bg': colors.gray[100],
},
},
}
}