Text Alignment Color Decoration in TailwindCSS
?? Text Alignment, Color, and Decoration in Tailwind CSS
Tailwind offers simple classes to style your text alignment, color, and decoration (like underline or strikethrough).
1. Text Alignment (text-*)
Controls horizontal alignment of text.
| Class | CSS Equivalent | Description |
|---|---|---|
text-left | text-align: left; | Align text to left |
text-center | text-align: center; | Center align |
text-right | text-align: right; | Align text to right |
text-justify | text-align: justify; | Justify text |
Example:
<p class="text-center"> This text is centered.</p>2. Text Color (text-{color})
Set the text color using Tailwind’s color palette.
| Class | CSS Equivalent | Description |
|---|---|---|
text-black | color: #000; | Black text |
text-white | color: #fff; | White text |
text-gray-500 | color: #6b7280; (example) | Gray shade text |
text-red-600 | color: #dc2626; | Red text |
text-blue-400 | color: #60a5fa; | Blue text |
| ... | ... | Tailwind includes many colors |
You can also use arbitrary values:
<p class="text-[#ff5733]">Custom orange text</p>3. Text Decoration (underline, line-through, no-underline)
Control decorations like underlines and strikethrough.
| Class | CSS Equivalent | Description |
|---|---|---|
underline | text-decoration: underline; | Underline text |
line-through | text-decoration: line-through; | Strikethrough text |
no-underline | text-decoration: none; | Remove underline |
Example:
<p class="underline">This text is underlined.</p><p class="line-through">This text is crossed out.</p><p class="no-underline">This text has no underline.</p>Summary Example:
<p class="text-center text-red-600 underline"> Centered, red, and underlined text.</p>Want examples with responsive text alignment or color hover effects?
