Tailwind provides us those classes we can use to match the corresponding color:
Every color has various levels:
You go from lower value to higher to make the color go from less intense to more intense:
We also have
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
The other color you’ll use is the background color. You use
bg-green-600, and so on.
You can also apply custom colors using the syntax
Lessons this unit:
|1:||Box model properties|
|4:||Flexbox and Grid in Tailwind|
|6:||Responsive design in Tailwind|