What Classes can be used for Text alignment and Styling in Tailwind CSS ?
Last Updated :
16 Feb, 2024
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.
Share your thoughts in the comments
Please Login to comment...