Search⌘ K
Home
Courses
Modern CSS with Tailwind

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...

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,
    } 
  }
}

List of colors

The complete list of colors is in the Tailwind documentation.

While we can completely replace the set of colors in theme#colors, we are more likely to want to add our own extra colors in theme#extend#colors, as shown below:

module.exports = {
  theme: {
    extend: {
...