Tailwind Text Color
In this article, we will explore the different ways to set the text color with Tailwind text colors.
Text color plays a crucial role in web design, as it affects readability and visual appeal.
Choosing the right color for your text can help make it stand out and draw attention to significant information on your website.
The text color utility in Tailwind CSS can be used to set the color of text displayed on the screen.
Tailwind Text Color Classes
You can set the text color of an element using a range of Tailwind text color classes:
| Classes | Overview |
| text-inherit | The text will inherit the parent element color. |
| text-current | This class is used to set the text color to its current text color. |
| text-transparent | The color property of the text element is set to transparent using this class. |
| text-black | As a result, the resulting text color is black. |
| text-white | Using this class, the text color is set to white. |
| text-slate-50 | The purpose of this class is to assign a shade of grayish blue color to the text of an element. |
| text-gray-50 | This class is utilized to assign a shade of gray color to the text element. |
| text-zinc-50 | The text color is set to a shade of grayish green color. |
| text-neutral-50 | The resulting text is a shade of grayish neutral in color. |
| text-stone-50 | As a result of this class, the text is a shade of grayish brown in color. |
| text-red-50 | The color of the text element using this class is a shade of red. |
| text-orange-50 | A shade of orange color is used for the text color. |
| text-amber-50 | The text color is set to a shade of amber using this class. |
| text-yellow-50 | This class is utilized to apply a shade of yellow color to the text element. |
| text-lime-50 | The purpose of this class is to set the color of the text element to a shade of lime. |
| text-green-50 | The color property of the text is set to a shade of green using this class. |
| text-emerald-50 | It sets the text color to a shade of light green. |
| text-teal-50 | In this case, the text is blueish-green in color. |
| text-cyan-50 | This class is used to set the text color to a shade of cyan. |
| text-sky-50 | It sets the text color to a shade of blue. |
| text-blue-50 | A shade of blue color is used to display the text. |
| text-indigo-50 | The resulting text element’s color is set to a shade of indigo. |
| text-violet-50 | Text is displayed on the screen using a shade of violet. |
| text-purple-50 | This class is utilized to set the text color to a shade of purple. |
| text-fuchsia-50 | A shade of pinkish-purple color is used to display the text. |
| text-pink-50 | A shade of pink color is used for displaying text. |
| text-rose-50 | The purpose of this class is to set the color of the text element to a shade of rose. |
Note: The color values denote the intensity of color and can be adjusted from 50-900, with 50 being the lightest while 900 being the darkest. The color values are 50,100 to 900 with increments of 100.
Text opacity can be adjusted using the color opacity modifier such as applying 50% opacity to text-black using the class “text-black/50”.
The opacity values that can be used are defined in the opacity class article.
You can also use arbitrary values for specifying opacity such text-black/[0.5] is used for applying 50% opacity to black text.
Syntax
<element class="text-cyan-600">...</element>
This example illustrates the various Tailwind text color classes for a better visualization:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-medium">Text Color Class in Tailwind</p>
<div class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded">
<p class="text-current p-2">
MrExamples using text-current
</p>
<p class="text-black p-2">
MrExamples using text-black
</p>
<p class="text-gray-700 p-2">
MrExamples using text-gray-700
</p>
<p class="text-red-700 p-2">
MrExamples using text-red-700
</p>
<p class="text-indigo-700 p-2">
MrExamples using text-indigo-700
</p>
<p class="text-blue-700 p-2">
MrExamples using text-blue-700
</p>
<p class="text-green-700 p-2">
MrExamples using text-green-700
</p>
<p class="text-yellow-700 p-2">
MrExamples using text-yellow-700
</p>
<p class="text-pink-700 p-2">
MrExamples using text-pink-700
</p>
<p class="text-purple-700 p-2">
MrExamples using text-purple-700
</p>
</div>
</body>
</html>
The following example covers further Tailwind text colors classes for a clear understanding:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-medium">Text Color Class in Tailwind</p>
<div class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded">
<p class="text-slate-700 p-2">
MrExamples using text-slate-700
</p>
<p class="text-neutral-500 p-2">
MrExamples using text-neutral-500
</p>
<p class="text-fuchsia-500 p-2">
MrExamples using text-fuchsia-500
</p>
<p class="text-amber-400 p-2">
MrExamples using text-amber-400
</p>
<p class="text-violet-700 p-2">
MrExamples using text-violet-700
</p>
<p class="text-emerald-600 p-2">
MrExamples using text-emerald-600
</p>
<p class="text-orange-500 p-2">
MrExamples using text-orange-500
</p>
<p class="text-zinc-700 p-2">
MrExamples using text-zinc-700
</p>
<p class="text-rose-400 p-2">
MrExamples using text-rose-400
</p>
<p class="text-sky-700 p-2">
MrExamples using text-sky-700
</p>
</div>
</body>
</html>
An example of modifying the opacity of text color is provided below:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-medium">Text Color Class in Tailwind</p>
<div class="bg-gray-50 p-4 font-medium w-fit mx-auto text-start rounded">
<p class="text-black/80 p-2">
MrExamples using text-black/80
</p>
<p class="text-black/60 p-2">
MrExamples using text-black/60
</p>
<p class="text-black/40 p-2">
MrExamples using text-black/40
</p>
<p class="text-black/[0.5] p-2">
MrExamples using text-black/[0.5]
</p>
<p class="text-black/[0.3] p-2">
MrExamples using text-black/[0.3]
</p>
<p class="text-black/[0.75] p-2">
MrExamples using text-black/[0.75]
</p>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
