In Tailwind CSS, various utility classes are available for text alignment and styling. Here are some commonly used classes:
Text Alignment:
Adjust the horizontal alignment of text using classes like text-left
, text-center
, text-right
, or text-justify
.
-
text-left
: Aligns text to the left. -
text-center
: Centers text. -
text-right
: Aligns text to the right. -
text-justify
: Justifies text.
Font Weight:
Font Weight controls the thickness of the font with classes like font-thin
, font-normal
, font-bold
, or font-black
.
CSS Property | Description |
---|---|
font-thin | Sets text to thin font weight. |
font-normal | Sets the text to normal font weight. |
font-semibold | Sets text to semi-bold font-weight. |
font-bold | Sets text to bold font weight. |
font-extra bold | Sets text to extra bold font weight. |
font-black | Sets text to black font-weight. |
Text Size:
Set the size of text with classes like text-xs
(extra small), text-lg
(large), or text-2xl
(even larger).
CSS Class | Description |
---|---|
text-xs | Sets text to extra-small size. |
text-sm | Sets the text to a small size. |
text-base | Sets the text to base size. |
text-lg | Sets text to large size. |
text-xl | Sets text to extra-large size. |
|
Additional size classes. |
Text Color:
Define the color of text using classes like text-red-500
, text-green-700
, or other color variants.
-
text-[color]
: Applies a specific text color, where[color]
is a color name or value.
Italic and Underline:
Add emphasis to text with classes like italic
italics and underline
underlining.
-
italic
: Makes text italic. -
underline
: Underlines text.
Text Decoration:
Apply various text decorations using classes like line-through
for strikethrough or no-underline
to remove underlining.
-
no-underline
: Removes underlining from text.
Letter Spacing:
Adjust the spacing between letters using classes like tracking-tighter
, tracking-normal
, or tracking-wider
.
-
tracking-tight
: Sets tight letter spacing. -
tracking-normal
: Sets normal letter spacing. -
tracking-wide
: Sets wide letter spacing.
Line Height:
It sets the height of a line of text.
-
leading-tight
: Sets tight line height. -
leading-normal
: Sets normal line height. -
leading-loose
: Sets loose line height.
Text Transform:
Change the capitalization of text with classes like uppercase
, lowercase
, or capitalize
.
-
uppercase
: Transforms text to uppercase. -
lowercase
: Transforms text to lowercase. -
capitalize
: Capitalizes the first letter of each word.