Hyphens

Learn how to use the `hyphens-*` utility in TailwindCSS to control word breaks in your text, especially useful for long words in languages like German.

The hyphens-* utility in TailwindCSS allows you to control how words break across lines in your text. This can be particularly useful for improving readability and ensuring that your text layout looks clean and professional. It is especially indispensable for handling long words in languages like German.

Basic Usage

You can use the hyphens-* utility to control word breaks in your text. Here are the available options:

hyphens-none: Prevents hyphenation.
hyphens-manual: Allows hyphenation only where you have manually inserted soft hyphens ().
hyphens-auto: Automatically hyphenates words according to the language rules.

This is a long paragraph of text that will not hyphenate at all, even if it means breaking the layout.

This is a long paragraph of text that will hyphenate only where soft hyphens are inserted.

This is a long paragraph of text that will automatically hyphenate words according to the language rules.

<p class="hyphens-none">
    This is a long paragraph of text that will not hyphenate at all, even if it means breaking the layout.
</p>
<p class="hyphens-manual">
    This is a long paragraph of text that will hy&shy;phen&shy;ate only where soft hyphens are inserted.
</p>
<p class="hyphens-auto">
    This is a long paragraph of text that will automatically hyphenate words according to the language rules.
</p>

Real World Example

Here’s a real-world example of using the hyphens-* utility to improve the readability of a block of text, particularly useful for long words in languages like German:

TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It is highly customizable and allows developers to create responsive, modern web applications with ease. In German, words like “Donaudampfschifffahrtsgesellschaftskapitän” can benefit greatly from automatic hyphenation.

<div class="max-w-lg">
    <p lang="de" class="hyphens-auto">
        TailwindCSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It is highly customizable and allows developers to create responsive, modern web applications with ease. In German, words like "Donaudampfschifffahrtsgesellschaftskapitän" can benefit greatly from automatic hyphenation.
    </p>
</div>

Conclusion

Using the hyphens-* utility in TailwindCSS allows you to control word breaks in your text, improving readability and ensuring a clean layout. This is particularly indispensable for handling long words in languages like German. By leveraging this utility, you can create more professional and user-friendly text layouts in your projects.

On this page