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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.