Tailwind CSS - Hyphens

Tailwind CSS - Hyphens

The hyphens utilities in Tailwind CSS control how words are hyphenated when they wrap in a text block. Proper hyphenation can improve text layout and readability, especially in narrow containers.

Hyphenation Utilities

Tailwind provides three classes to manage hyphenation behavior.

Class	CSS Properties
hyphens-none	hyphens: none;
hyphens-manual	hyphens: manual;
hyphens-auto	hyphens: auto;

Functionality and Usage

• hyphens-none: Prevents the browser from automatically hyphenating words. Words will only wrap at spaces.
• hyphens-manual: (Default behavior) Allows the browser to hyphenate words only at manually specified points, using a soft hyphen (­ or \u00AD).
• hyphens-auto: Allows the browser to automatically insert hyphens where appropriate, based on the language rules defined by the lang attribute on the HTML element.

Code Examples

To correctly demonstrate hyphenation, we’ll use a fixed-width container and set the lang attribute, which is crucial for hyphens-auto.

Example: Automatic Hyphenation with hyphens-auto

Notice how the browser automatically breaks the long word supercalifragilisticexpialidocious according to English hyphenation rules. This only works if lang="en" (or another appropriate language code) is set.

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">Automatic Hyphenation (`hyphens-auto`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-auto">
    This is a demonstration of automatic hyphenation: supercalifragilisticexpialidocious.
   </p>
  </div>
 </body>
</html>

Example: Manual Hyphenation with hyphens-manual

Here, we use a soft hyphen (­) to suggest a potential breaking point. The browser will only hyphenate at this exact spot if needed.

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">Manual Hyphenation (`hyphens-manual`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-manual">
    This is a demonstration of manual hyphenation: supercali&shy;fragilistic&shy;expialidocious.
   </p>
  </div>
 </body>
</html>

Example: Disabling Hyphenation with hyphens-none

With hyphens-none, the long word will not be broken, potentially causing layout overflow issues. This is useful when you want to prevent line breaks within specific words at all costs.

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <h2 class="text-xl font-bold mb-4">No Hyphenation (`hyphens-none`)</h2>
  <div class="w-48 bg-gray-100 p-4 border">
   <p class="hyphens-none">
    This is a demonstration of no hyphenation: supercalifragilisticexpialidocious.
   </p>
  </div>
 </body>
</html>

Common Pitfalls

• Forgetting the lang attribute: hyphens-auto is dependent on the lang attribute on the <html> tag or a parent element. Without it, the browser doesn’t know which language’s hyphenation rules to apply.
• Browser Support: While widely supported in modern browsers, check compatibility if you need to support older platforms. The hyphens property has vendor prefixes (-webkit-hyphens, -ms-hyphens) which Tailwind handles for you.