Use text-wrap in Tailwind CSS 4

Tailwind's text-wrap Utilities

Tailwind CSS added text-wrap utilities in v3.4 (early 2024) and refined them in v4. They map directly to the underlying CSS property:

Utility	CSS
text-wrap	text-wrap: wrap;
text-nowrap	text-wrap: nowrap;
text-balance	text-wrap: balance;
text-pretty	text-wrap: pretty;

(text-wrap: stable does not yet have a dedicated utility but can be added via @layer utilities.)

Common patterns

Headings:

<h1 class="text-3xl font-bold text-balance">
  Build accessible, performant interfaces without leaving your browser
</h1>

Body paragraphs:

<p class="leading-relaxed text-pretty">
  When CSS text-wrap shipped in Chrome 114, designers finally
  gained a high-level lever for line breaking...
</p>

Buttons:

<button class="rounded-md bg-blue-600 px-4 py-2 text-white text-nowrap">
  Add to Cart
</button>

Combining with line-clamp

Tailwind's line-clamp-N utilities pair naturally with text-wrap utilities:

<h3 class="text-balance line-clamp-2">
  Long card title that should balance across two lines maximum
</h3>

<p class="text-pretty line-clamp-3">
  Multi-paragraph product description that should be pretty-wrapped
  and clamped to three visible lines with an ellipsis...
</p>

Responsive variants

text-wrap utilities support all Tailwind responsive variants. One use case: rebalance only above a certain breakpoint, where the heading actually wraps:

<h2 class="text-2xl font-bold md:text-balance">
  Different wrapping behavior at md and up
</h2>

(Below md, the heading uses default wrapping; at md and up, it gets balanced. Useful when the mobile heading is short enough to be one line.)

Custom configuration

If you need additional values (stable, custom defaults), extend Tailwind's theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.text-stable': { 'text-wrap': 'stable' },
      });
    },
  ],
};

Tailwind 4's CSS-native config

Tailwind 4 lets you define utilities in CSS via @utility:

@utility text-stable {
  text-wrap: stable;
}

Then use it as <p class="text-stable"> anywhere in markup.