Tailwind CSS Text Styles
Let’s explore some basic utility classes provided by Tailwind CSS for styling text elements.
Text Color:
Tailwind CSS provides utility classes for changing the color of text. You can use classes like text-black, text-white, text-red-500, etc., where the number represents the shade of the color.
1
2
3
<p class="text-black">Black Text</p>
<p class="text-red-500">Red Text</p>
<p class="text-blue-700">Blue Text</p>
Text Size
You can adjust the size of text using classes like text-xs, text-sm, text-lg, etc., which stand for extra small, small, large, etc.
1
2
3
<p class="text-xs">Extra Small Text</p>
<p class="text-lg">Large Text</p>
<p class="text-3xl">Extra Large Text</p>
Font Weight
To change the font weight, use classes like font-thin, font-normal, font-bold, etc.
1
2
<p class="font-thin">Thin Font</p>
<p class="font-bold">Bold Font</p>
Text Alignment
You can align text using classes like text-left, text-center, text-right, etc.
1
2
3
<p class="text-left">Left Aligned Text</p>
<p class="text-center">Center Aligned Text</p>
<p class="text-right">Right Aligned Text</p>
Text Decoration
To add text decoration like underline, line-through, etc., use classes like underline, line-through.
1
2
<p class="underline">Underlined Text</p>
<p class="line-through">Line-through Text</p>
These are just a few examples of the text utility classes provided by Tailwind CSS. You can combine these classes to achieve the desired styling for your text elements.