Using Colors in Tailwind CSS
Colors
Tailwind CSS provides a wide range of color utilities that you can apply to elements. These utilities help you quickly set background colors, text colors, and border colors.
Note
The numbers in these classes represent different shades of the base color. These numbers range from
50to900:
- Lower numbers (e.g.,
50): Lighter shades;- Higher numbers (e.g.,
900): Darker shades.
Background Colors
Use the bg- prefix followed by the color name and shade.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Colors - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-red-500 p-4">Background Color Red</div>
<div class="bg-green-500 p-4">Background Color Green</div>
<div class="bg-blue-500 p-4">Background Color Blue</div>
</body>
</html>
Text Colors
Use the text- prefix followed by the color name and shade.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Colors - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-red-500">Text Color Red</p>
<p class="text-green-500">Text Color Green</p>
<p class="text-blue-500">Text Color Blue</p>
</body>
</html>
Border Colors
Use the border- prefix followed by the color name and shade.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic Styling - Colors - Example 3</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="border border-red-500 p-4">Border Color Red</div>
<div class="border border-green-500 p-4">Border Color Green</div>
<div class="border border-blue-500 p-4">Border Color Blue</div>
</body>
</html>
Note
To see all the existing colors, you can refer to the Tailwind documentation below.
1. Which class would you use to set a background color to blue?
2. Which utility class would you use to set the text color to gray?
Everything was clear?
Thanks for your feedback!
Section 2. Chapter 3
