Text Alignment and Decoration in Tailwind

Tailwind makes it easy to align your text and apply decorative styles like underlines, line-throughs, and more using utility classes.

1. Text Alignment

Use these classes to control horizontal alignment of text:

text-left     /* Align text to the left (default) */
text-center   /* Align text to the center */
text-right    /* Align text to the right */
text-justify  /* Justify text */

Left aligned text

Center aligned text

Right aligned text

This paragraph is justified. It expands to fill the width of its container by adjusting the spacing between words and characters.

2. Text Decoration

Tailwind provides classes for common text decorations:

underline            /* Underlines the text */
line-through         /* Strikes through the text */
no-underline         /* Removes underline */
decoration-dashed    /* Makes underline dashed */
decoration-double    /* Double underline */
decoration-wavy      /* Wavy underline */
decoration-none      /* No decoration */

This is underlined text

This text is struck through

This text has no underline

Wavy underline style

3. Decoration Color & Thickness

You can also customize decoration color and thickness:

decoration-pink-500    /* Set decoration color */
decoration-2           /* Set decoration thickness */

Pink thick underline

Yellow thick line-through

4. Best Practices

Use text-center for headlines and banners.
Underline only interactive elements like links for clarity.
Use no-underline with buttons or custom link styles to control visuals.

Conclusion

Tailwind’s text alignment and decoration utilities give you precise control over typography and layout. Combine them with colors and spacing for clean, effective text styling.

← Previous: Line Height, Letter Spacing Next: Text Truncation, Clamping →