Whitespace

​

Basic usage

​

Normal

Use whitespace-normal to cause text to wrap normally within an element. Newlines and spaces will be collapsed.

<div class="w-3/4 ...">
  <div class="whitespace-normal ...">Hey everyone!

It's almost 2022       and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​

No Wrap

Use whitespace-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-nowrap ...">Hey everyone!

It's almost 2022       and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​

Pre

Use whitespace-pre to preserve newlines and spaces within an element. Text will not be wrapped.

<div class="w-3/4 overflow-x-auto ...">
  <div class="whitespace-pre ...">Hey everyone!

It's almost 2022       and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​

Pre Line

Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.

<div class="w-3/4 ...">
  <div class="whitespace-pre-line ...">Hey everyone!

It's almost 2022       and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​

Pre Wrap

Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.

<div class="w-3/4 ...">
  <div class="whitespace-pre-wrap ...">Hey everyone!

It's almost 2022       and we still don't know if there is aliens living among us, or do we? Maybe the person writing this is an alien.

You will never know.</div>
</div>

​

Applying conditionally

​

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:whitespace-pre to only apply the whitespace-pre utility on hover.

<div class="whitespace-normal hover:whitespace-pre">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:whitespace-pre to apply the whitespace-pre utility at only medium screen sizes and above.

<div class="whitespace-normal md:whitespace-pre">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.