Open In App

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

Last Updated : 16 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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.

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.

  • 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.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads