Tailwind provides us those classes we can use to match the corresponding color:
| _ | _ | _ |
|---|---|---|
slate | gray | zinc |
neutral | stone | red |
orange | amber | yellow |
lime | green | emerald |
teal | cyan | sky |
blue | indigo | violet |
purple | fuchsia | pink |
rose | rose |
Every color has various levels:
| _ | _ | _ |
|---|---|---|
50 | 100 | 200 |
300 | 400 | 500 |
600 | 700 | 800 |
900 | 950 |
You go from lower value to higher to make the color go from less intense to more intense:
fuchsia-50fuchsia-100fuchsia-200fuchsia-300fuchsia-400fuchsia-500fuchsia-600fuchsia-700fuchsia-800fuchsia-900fuchsia-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].
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 |