In this tutorial we will see how to use text color in tailwind css. Also we will see responsive text color, hover text color, custom text color example with Tailwind CSS.
Examples
tailwind css simple text color, blue, green, red, yellow, purple, gray color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Text Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-gray-600">tailwind css gray text color</p>
<p class="text-blue-600">tailwind css blue text color</p>
<p class="text-green-600">tailwind css green text color</p>
<p class="text-red-600">tailwind css red text color</p>
<p class="text-yellow-600">tailwind css yellow text color</p>
<p class="text-purple-600">tailwind css purple text color</p>
</body>
</html>
tailwind css text color
tailwind css text color value with 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Text Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-xl text-blue-50">tailwind css blue text color</p>
<p class="text-xl text-blue-100">tailwind css blue text color</p>
<p class="text-xl text-blue-200">tailwind css blue text color</p>
<p class="text-xl text-blue-300">tailwind css blue text color</p>
<p class="text-xl text-blue-400">tailwind css blue text color</p>
<p class="text-xl text-blue-500">tailwind css blue text color</p>
<p class="text-xl text-blue-600">tailwind css blue text color</p>
<p class="text-xl text-blue-700">tailwind css blue text color</p>
<p class="text-xl text-blue-800">tailwind css blue text color</p>
<p class="text-xl text-blue-900">tailwind css blue text color</p>
</body>
</html>
tailwind css text color value
tailwind css text color with opacity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Text Color Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class="text-xl text-blue-600/100">tailwind css blue text color with opacity</p>
<p class="text-xl text-blue-600/75">tailwind css blue text color with opacity</p>
<p class="text-xl text-blue-600/50">tailwind css blue text color with opacity</p>
<p class="text-xl text-blue-600/25">tailwind css blue text color with opacity</p>
<p class="text-xl text-blue-600/0">tailwind css blue text color with opacity</p>
</body>
</html>
tailwind text color with opacity.
tailwind css responsive text color.
<p class=" lg:text-blue-600 text-purple-600">tailwind css responsive text color</p>
tailwind css hover text color.
<p class=" hover:text-blue-600 text-gray-600">tailwind css hover text color</p>
tailwind css custom text color.
<p class="text-[#99ff66]">tailwind css custom text color</p>
Read Also
Tailwind CSS Text Align Example
Tailwind CSS Text Decoration Example
Tailwind CSS Text Decoration Color Example
Tailwind CSS Text Decoration Style Example
How to Use Text Underline Offset in Tailwind CSS
How to Use Text Decoration Thickness in Tailwind CSS
