Tailwind Text Alignment and Decoration to CSS
Convert Tailwind text-center, text-right, underline, line-through, uppercase, truncate and other text utilities to plain CSS declarations.
Typography
Detailed Explanation
Text Alignment, Decoration, and Transform
Tailwind provides classes for text alignment, text decoration, text transform, and text overflow. Each maps to straightforward CSS properties.
Text Alignment
/* text-left */
text-align: left;
/* text-center */
text-align: center;
/* text-right */
text-align: right;
/* text-justify */
text-align: justify;
Text Decoration
/* underline */
text-decoration-line: underline;
/* line-through */
text-decoration-line: line-through;
/* overline */
text-decoration-line: overline;
/* no-underline */
text-decoration-line: none;
Text Transform
/* uppercase */
text-transform: uppercase;
/* lowercase */
text-transform: lowercase;
/* capitalize */
text-transform: capitalize;
/* normal-case */
text-transform: none;
Text Overflow: Truncate
The truncate class is a shorthand that combines three CSS properties to clip overflowing text with an ellipsis:
/* truncate */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Whitespace Control
/* whitespace-nowrap */
white-space: nowrap;
/* whitespace-pre */
white-space: pre;
/* whitespace-pre-wrap */
white-space: pre-wrap;
Word Breaking
/* break-words */
overflow-wrap: break-word;
/* break-all */
word-break: break-all;
These utilities are essential for handling dynamic content that may exceed its container width.
Use Case
Content-focused websites where text needs consistent alignment and overflow handling, especially when migrating a blog or documentation site from Tailwind to a custom CSS stylesheet.