rembhyphens
Utilities for controlling how words should be hyphenated.
| Class | Styles |
|---|---|
hyphens-none | |
hyphens: none; |
|
| hyphens-manual |
hyphens: manual;
|
| hyphens-auto |
hyphens: auto;
|
Use the hyphens-none utility to prevent words from being hyphenated even if the line break suggestion ­ is used:
Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.
<p class="hyphens-none"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>
Use the hyphens-manual utility to only set hyphenation points where the line break suggestion ­ is used:
Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.
<p class="hyphens-manual"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>
This is the default browser behavior.
Use the hyphens-auto utility to allow the browser to automatically choose hyphenation points based on the language:
Officially recognized by the Duden dictionary as the longest word in German, Kraftfahrzeughaftpflichtversicherung is a 36 letter word for motor vehicle liability insurance.
<p class="hyphens-auto" lang="de"> ... Kraftfahrzeughaftpflichtversicherung is a ...</p>
The line break suggestion ­ will be preferred over automatic hyphenation points.
Prefix a hyphens utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="hyphens-none md:hyphens-auto ..."> Lorem ipsum dolor sit amet...</p>
Learn more about using variants in the variants documentation.
On this page
[
From the creators of Tailwind CSS
Make your ideas look awesome, without relying on a designer.
“This is the survival kit I wish I had when I started building apps.”
Derrick Reimer, SavvyCal
](https://www.refactoringui.com/?ref=sidebar)
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy