Text Formatting
- Apply text transformation, decoration, and formatting utilities.
Why Text Formatting Matters
Text formatting is not cosmetic.
It directly affects:Readability
Visual balance
Content scanning
UI clarity
In Tailwind CSS, text formatting is handled using simple, predictable utility classes, instead of CSS selectors.
Text Alignment in Tailwind CSS
What Is Text Alignment ?
Text alignment controls how text is positioned horizontally inside its container.
Common alignments:
Left
Center
Right
Justify
Tailwind provides utilities for each case.
Text Alignment Utilities
Syntax:
text-{alignment}
Available alignment classes:
Class Effect text-left Align text to the left text-center Center-align text text-right Align text to the right text-justify Justify text
Tailwind Text Alignment Utilities
Text alignment utilities in Tailwind control how text is positioned inside its container.
<p class="text-left">
This text is left aligned.
</p>
<p class="text-center">
This text is center aligned.
</p>
<p class="text-right">
This text is right aligned.
</p>
<p class="text-justify">
This text is justified across the container width.
</p>By default, most text is left-aligned.
Use Cases for Alignment
Tailwind Centered Heading
Center alignment is commonly used for headings to create a clear and visually balanced layout.
<h1 class="text-3xl font-bold text-center">
Welcome to Our Website
</h1>Used in:
Landing pages
Hero sections
Modals
Tailwind Left-Aligned Body Text
Body content is usually left-aligned to improve readability and natural reading flow.
<p class="text-base text-gray-700 text-left">
This paragraph follows standard reading alignment.
</p>Best for:
Articles
Forms
Descriptions
Tailwind Button and Responsive Text Alignment
Text alignment utilities can be used for UI elements like buttons and can change based on screen size.
<button class="text-center bg-blue-600 text-white px-4 py-2 rounded">
Submit
</button>
<h2 class="text-left md:text-center">
Responsive Alignment
</h2>Meaning:
Left-aligned on mobile
Center-aligned on larger screens
This is common in modern responsive design.
Text Decoration in Tailwind CSS
What Is Text Decoration ?
Text decoration controls visual lines applied to text, such as:
Underlines
Line-through
No decoration
Tailwind provides utilities to manage these cleanly.
Text Decoration Utilities
Syntax:
{decoration}
Available classes:
Class Effect underline Adds underline line-through Strikes text no-underline Removes underline
Tailwind Text Decoration Utilities
Text decoration utilities in Tailwind control underline, line-through, and link styling.
<p class="underline">
Underlined text
</p>
<p class="line-through">
This item is completed
</p>
<a href="#" class="no-underline text-blue-600">
Link without underline
</a>
<a href="#" class="underline text-blue-600">
Read more
</a>
<a href="#" class="no-underline text-blue-600 hover:underline">
Read more
</a>This improves UX:
Clean by default
Clear on hover
Used in:
E-commerce
Task lists
Offers
Hover-Based Decoration
Tailwind Hover Text Decoration
Use the hover: modifier to apply text decoration when a user hovers over an element.
<a class="no-underline hover:underline text-blue-600">
Hover to underline
</a>No CSS selectors required.
Combining Alignment & Decoration
Combining Text Alignment and Decoration in Tailwind
Tailwind allows combining alignment, decoration, and typography utilities to format text elements.
<p class="text-center underline text-gray-700">
Centered and underlined text
</p>
<h3 class="text-center font-semibold text-lg underline">
Terms & Conditions
</h3>This shows how utilities layer together.
Common Beginner Mistakes
Center-aligning all text
Overusing underline
Using line-through incorrectly
Removing link underlines without hover feedback
Ignoring responsive alignment
Good formatting is intentional, not decorative.
Best Practices for Text Formatting
Use text-left for most content
Center-align only key headings
Use underline mainly for links
Combine no-underline with hover:underline