Why is the lang attribute required for hyphens-auto?

The browser's hyphenation algorithm uses language-specific rules to determine where words can be hyphenated. Without the lang attribute (e.g., lang="en"), the browser doesn't know which language rules to apply, so automatic hyphenation won't work.

When should I use hyphens-none in Tailwind CSS?

Use hyphens-none when you want to prevent any hyphenation, even at soft hyphens. This is useful for code snippets, brand names, technical terms, or any text where hyphenation would reduce readability or cause confusion.

How do I add a soft hyphen for hyphens-manual?

Use the HTML entity (soft hyphen) in your text where you want to allow a break. For example: 'supercalifragilistic' will only break at those points when using hyphens-manual.

Tailwind CSS Hyphens Cheatsheet

Q: What is the difference between hyphens-auto and hyphens-manual in Tailwind CSS?

hyphens-auto automatically inserts hyphens at appropriate break points in words when they wrap to the next line. hyphens-manual only breaks words at manually inserted soft hyphens () or the hyphen-minus character. hyphens-auto requires the lang attribute to work properly.

Complete reference for Tailwind v4 hyphens utilities.
Click any class to copy it to your clipboard.

Important: The lang Attribute

For hyphens-auto to work, you must set the lang attribute on the element or one of its ancestors. Without it, the browser cannot determine the appropriate hyphenation rules.

Without lang attribute

<p class="hyphens-auto">
  Internationalization
</p>
<!-- Hyphenation may not work -->

With lang attribute

<p class="hyphens-auto" lang="en">
  Internationalization
</p>
<!-- Hyphenation works correctly -->

Tip: You can set lang="en" on your <html> tag to enable hyphenation globally.

hyphens: none;

Words will never be hyphenated, even if they contain soft hyphens (). Long words will overflow or break depending on other word-break settings.

Long Word (English)

Internationalization

Long German Word

Donaudampfschifffahrtsgesellschaftskapitan

Paragraph Text

Internationalization and localization are essential considerations for modern web applications. These processes ensure that software can be adapted for different languages and regions without engineering changes.

With Soft Hyphens ()

Supercalifragilisticexpialidocious

Ignores soft hyphens, no breaks

hyphens: manual;

Words only break at soft hyphens () or the hyphen-minus character (-). This is the browser default behavior.

Long Word (English)

Internationalization

Long German Word

Donaudampfschifffahrtsgesellschaftskapitan

Paragraph Text

With Soft Hyphens ()

Supercalifragilisticexpialidocious

Breaks only at soft hyphen positions

hyphens: auto;

The browser automatically inserts hyphens at appropriate syllable breaks when words wrap. Requires the lang attribute (e.g., lang="en") to work properly.

Long Word (English)

Internationalization

Long German Word

Donaudampfschifffahrtsgesellschaftskapitan

Paragraph Text

Side-by-Side Comparison

See how each hyphens utility handles the same long word in a narrow container.

hyphens-none

Internationalization

hyphens-manual

Internationalization

hyphens-auto

Internationalization

Common Use Cases

Justified Text Columns

<article lang="en">
  <p class="hyphens-auto text-justify
     max-w-prose">
    Long form content with
    justified alignment...
  </p>
</article>

Use hyphens-auto with justified text to avoid large gaps between words.

Narrow Sidebar Content

<aside class="w-48" lang="en">
  <p class="hyphens-auto">
    Content in narrow columns
    benefits from hyphenation
  </p>
</aside>

Narrow containers often need hyphenation to prevent awkward line breaks.

Code and Technical Content

<code class="hyphens-none">
  getServerSideProps
</code>

Use hyphens-none for code, brand names, and technical terms that should never be hyphenated.

Controlled Hyphenation Points

<p class="hyphens-manual">
  Anti&shy;dis&shy;establishment
</p>

Use hyphens-manual with  for precise control over break points.

Quick Reference Table

Class	CSS Property	Behavior
`hyphens-none`	`hyphens: none;`	Never hyphenate, even at soft hyphens
`hyphens-manual`	`hyphens: manual;`	Only at explicit soft hyphens ()
`hyphens-auto`	`hyphens: auto;`	Automatic (requires lang attribute)

Frequently Asked Questions

What is the difference between hyphens-auto and hyphens-manual?

hyphens-auto automatically inserts hyphens at appropriate syllable breaks when words wrap, using language-specific rules. hyphens-manual only breaks words where you've explicitly added soft hyphens () in your HTML. Use hyphens-auto for general content and hyphens-manual when you need precise control over hyphenation points.

Why doesn't hyphens-auto work on my page?

The most common reason is a missing lang attribute. The browser needs to know the language to apply correct hyphenation rules. Add lang="en" (or your content language) to the element or its parent. Also ensure your container is narrow enough to trigger word wrapping.

Which browsers support CSS hyphens?

CSS hyphens is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. However, hyphenation dictionary support varies by browser and language. English hyphenation works well across all browsers.

Should I use hyphens-auto with text-justify?

Yes! hyphens-auto and text-justify work great together. Justified text can create large gaps between words, especially in narrow columns. Automatic hyphenation fills these gaps by breaking long words, creating a more polished appearance.

How do I add a soft hyphen in HTML?

Use the HTML entity  (soft hyphen) or the Unicode character U+00AD. For example: 'supercalifragilistic' will only show hyphens if the word breaks at those points. This works with hyphens-manual and hyphens-auto.

About Hyphens Utilities

Tailwind's hyphens utilities control how words are hyphenated when they wrap to the next line. This is especially useful for narrow text columns, justified text, and internationalized content.

Related utilities include word-break classes for controlling how words break, and overflow-wrap for handling long strings.

Combine with responsive prefixes for different behavior at different screen sizes:hyphens-none md:hyphens-auto

Inspect Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element including hyphens utilities. Extract any style with 2 clicks.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →