Default Color
Explore how to customize the default color palette in Tailwind CSS by extending or replacing color sets in the configuration file. Understand how to create nested custom colors, add new color shades, and implement dark mode using the darkMode setting for responsive design.
We'll cover the following...
We'll cover the following...
Tailwind has a common set of colors used as a suffix for many utility families, including .text-, .bg-, and more. Tailwind provides 22 colors, although only eight are enabled by default. If we want to change that setting, we can reach them via a colors object:
module.exports = {
theme: {
colors: {
gray: colors.warmGray,
red: colors.red,
green: colors.green,
}
}
}
...