...

/

Default Color

Default Color

Learn how to customize themes by using Tailwind default colors.

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