Open In App

What Classes can be used for Text alignment and Styling in Tailwind CSS ?

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.



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.

text-2xl, text-3xl, etc.

Additional size classes.

Text Color:

Define the color of text using classes like text-red-500, text-green-700, or other color variants.

Italic and Underline:

Add emphasis to text with classes like italic italics and underline underlining.

Text Decoration:

Apply various text decorations using classes like line-through for strikethrough or no-underline to remove underlining.

Letter Spacing:

Adjust the spacing between letters using classes like tracking-tighter, tracking-normal, or tracking-wider.

Line Height:

It sets the height of a line of text.

Text Transform:

Change the capitalization of text with classes like uppercase, lowercase, or capitalize.

Article Tags :