Learning Tailwind CSS: Colors System (1/N)

This is Part 1 of a series of article learning Tailwind CSS nomenclature.

Tailwind CSS, by default, provides a comprehensive color palette consisting of 10 handpicked colors with each color having 9 shades. Each shade is assigned a number, multiple of hundred, from 100 to 900, with lightest shade being 100 and darkest 900.

Other than that, it also provides basic color white, black and transparent.

Tailwind CSS default color palette

So, In total Tailwind comes with 93 colors (3 + 90 (10*9) = 93), each of these have utility classes of text, background(bg), border and placeholder with following pattern:

.utility-{color}-{shade}

utility could be text, bg, border or placeholder as exemplified below

.text-{color}-{shade}         ->  .text-purple-400
.bg-{color}-{shade}           ->  .bg-black-700
.border-{color}-{shade}       ->  .border-gray-800
.placeholder-{color}-{shade}  ->  .placeholder-red-300

If you are following along, congratulations, you have already learned all color utilities of Tailwind CSS.

In next post, we’ll discuss the spacing system of Tailwind CSS, which is used in generating utilities for margin, padding, width and height.

Happy Coding!