Default Color

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: {
      colors: {
        "company-orange": "#ff5715",
        "company-dark-blue": "#323C64",
        "company-grey": "#DADADA",
      } 
    }
  } 
}

Now we can use .text-company-orange or .bg-company-grey. We can also add color families by using the same colors object as the value to any key.

Nesting the colors

We can also nest the colors to remove duplication:

module.exports = {
  theme: {
    extend: {
      colors: {
        "company": {
          "orange": "#ff5715",
          "dark-blue": "#323C64",
          "grey": " #DADADA",
       } 
     }
   }
  }
}

For example, the resulting classes are still the same as the unnested colors, such as .text-company-orange. If we only want .text-company, using the key default will stand in for the unsuffixed value. If we extend colors with an existing color, for example, if we provide red: { '100': "#WHATEVER" }, we will replace the existing red family with our new set. If we want to extend a color with a new level, we can use the spread operator:

module.exports = {
  theme: {
    extend: {
      colors: {
        "red": {
          ...colors.red,
          "450": " #CC0000",
       } 
     }
   }
 }
}

In the following playground, we’ll customize the colors by updating the Tailwind configuration file: