Colors

Customizing the default color palette for your project.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

To Document:

  • Explaining the numeric scale
  • Literal color names vs. "semantic" color names
  • How to remove unused colors
  • How the colors were picked (by hand), and why it's not easy for you to generate your own set of colors
  • Nested object syntax vs key-value syntax
  • Customizing colors for core plugins separately instead of globally

To get you started, Tailwind includes a generous palette of great looking colors that are perfect for prototyping, or even as a starting point for your own custom color palette.

Black & White

Black
#000000
White
#FFFFFF

Gray

100
#F7FAFC
200
#EDF2F7
300
#E2E8F0
400
#CBD5E0
500
#A0AEC0
600
#718096
700
#4A5568
800
#2D3748
900
#1A202C

Red

100
#FFF5F5
200
#FED7D7
300
#FEB2B2
400
#FC8181
500
#F56565
600
#E53E3E
700
#C53030
800
#9B2C2C
900
#742A2A

Orange

100
#FFFAF0
200
#FEEBC8
300
#FBD38D
400
#F6AD55
500
#ED8936
600
#DD6B20
700
#C05621
800
#9C4221
900
#7B341E

Yellow

100
#FFFFF0
200
#FEFCBF
300
#FAF089
400
#F6E05E
500
#ECC94B
600
#D69E2E
700
#B7791F
800
#975A16
900
#744210

Green

100
#F0FFF4
200
#C6F6D5
300
#9AE6B4
400
#68D391
500
#48BB78
600
#38A169
700
#2F855A
800
#276749
900
#22543D

Teal

100
#E6FFFA
200
#B2F5EA
300
#81E6D9
400
#4FD1C5
500
#38B2AC
600
#319795
700
#2C7A7B
800
#285E61
900
#234E52

Blue

100
#EBF8FF
200
#BEE3F8
300
#90CDF4
400
#63B3ED
500
#4299E1
600
#3182CE
700
#2B6CB0
800
#2C5282
900
#2A4365

Indigo

100
#EBF4FF
200
#C3DAFE
300
#A3BFFA
400
#7F9CF5
500
#667EEA
600
#5A67D8
700
#4C51BF
800
#434190
900
#3C366B

Purple

100
#FAF5FF
200
#E9D8FD
300
#D6BCFA
400
#B794F4
500
#9F7AEA
600
#805AD5
700
#6B46C1
800
#553C9A
900
#44337A

Pink

100
#FFF5F7
200
#FED7E2
300
#FBB6CE
400
#F687B3
500
#ED64A6
600
#D53F8C
700
#B83280
800
#97266D
900
#702459

Customizing

The theme.colors property allows you to override Tailwind's default color palette.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: '#5c6ac4',
      blue: '#007ace',
      red: '#de3618',
    }
  }
}

By default this color palette is shared by the textColor, borderColor, and backgroundColor utilities. The above configuration would generate classes like .text-indigo, .border-blue, and .bg-red.

You can define your colors as a simple list of key-value pairs, or using a nested object notation where the nested keys are added to the base color name as modifiers:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        lighter: '#b3bcf5',
        default: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Like many other places in Tailwind, the default key is special and means "no modifier", so this configuration would generate classes like .text-indigo-lighter, .text-indigo, and .text-indigo-dark.