Roadmap Blog
refactoring
use of
how to create
when to use
mistakes to avoid
Tip 11/72

Text Balance

Use `text-balance` for Better Text Wrapping

TailwindCSS provides the text-balance utility to improve the readability of multi-line text by balancing the line lengths. This prevents uneven wrapping, especially in headlines or blocks of text.

How to Use text-balance

Simply add the text-balance class to any text element :

Create beautifully balanced headlines with ease.
<h1 class="text-4xl font-semibold text-balance text-gray-950 dark:text-white">Create beautifully balanced headlines with ease.</h1>

Same example without text-balance :

Create beautifully balanced headlines with ease.

Why Use text-balance?

  • No <br> Needed: Automatically balances lines without manual markup.
  • Cleaner Code: Simplifies your HTML.
  • Improved Readability: Ensures even and appealing text wrapping.

Browser Support

While powerful, text-balance relies on the CSS text-wrap: balance property, which is not yet supported by Safari. Test your designs across browsers to ensure fallback solutions where necessary.