Tailwind Hyphens

The tailwind hyphens utility class allows you to control how words are hyphenated within an element's content. With Tailwind's hyphens class, you can specify whether words should be hyphenated automatically or prevented from hyphenation.

Applying Tailwind Hyphens

To apply hyphenation to an element's content, you can use the tailwind hyphens-{value} utility class, where {value} represents the desired hyphenation behavior. Here are the available options:

• hyphens-auto: Enables automatic hyphenation (default).
• hyphens-none: Disables hyphenation.

<h1>Hello Word</h1>
<p class="hyphens-none">
  The longest word in the English language is pneumonoultramicroscopicsilicovolcanoconiosis
</p>

Preview

Responsive Tailwind Hyphens

Tailwind CSS allows you to apply hyphenation classes responsively at different breakpoints. To use responsive tailwind hyphenation classes, you can append the breakpoint prefix to the utility class. For example, md:hyphens-auto enables automatic hyphenation starting from the medium breakpoint and above.

<div class="hyphens-auto md:hyphens-none">
  <!-- Content here -->
</div>

In the above example, the hyphenation behavior for the <div> element is automatic by default (hyphens-auto), but starting from the medium breakpoint and above, it changes to no hyphenation (md:hyphens-none).

Tailwind Hyphens Class Table

Windframe Tailwind blocks

blog