Tailwind CSS: Colors

Tailwind provides us those classes we can use to match the corresponding color:

___
slategrayzinc
neutralstonered
orangeamberyellow
limegreenemerald
tealcyansky
blueindigoviolet
purplefuchsiapink
roserose

Every color has various levels:

___
50100200
300400500
600700800
900950

You go from lower value to higher to make the color go from less intense to more intense:

  • fuchsia-50
  • fuchsia-100
  • fuchsia-200
  • fuchsia-300
  • fuchsia-400
  • fuchsia-500
  • fuchsia-600
  • fuchsia-700
  • fuchsia-800
  • fuchsia-900
  • fuchsia-950

We also have transparent, black and white, which do not have levels.

To apply a color to a text, prepend text- to any color.

To apply a background color, prepend bg- to any color.

We’ve seen how to color text using text-black. Black and white (text-white) are kind of unique because they have this “only” color.

Other colors have shades, going from 100 to 900: text-red-500 for example applies the color using the color CSS property, setting it to a red value with an intensity of 500 (try text-red-200 or text-red-800 too).

The other color you’ll use is the background color. You use bg-black, bg-green-600, and so on.

You can also apply custom colors using the syntax bg-[#00FFCC].

Link to docs

Lessons in this unit:

0: Introduction
1: Box model properties
2: ▶︎ Colors
3: Typography
4: Flexbox and Grid in Tailwind
5: Modifiers
6: Responsive design in Tailwind
Want to learn more? Check out our courses