Tailwind CSS Whitespace Utility

The whitespace utility in Tailwind CSS lets you control how spaces and line breaks are handled inside elements. It’s a small but powerful tool that helps you fine-tune text layouts, prevent unwanted wrapping, and keep your content looking clean and consistent across devices.

Applying Whitespace Utilities

You can set the whitespace behavior by using the whitespace-{value} class. Replace {value} with the desired behavior. Here are some of the most common options:

• whitespace-normal – Collapses multiple spaces into one and treats line breaks as a single space (default browser behavior).

• whitespace-nowrap – Prevents text from wrapping to the next line, which can cause overflow or truncation if the text is too long.

• whitespace-pre – Preserves all spaces and line breaks exactly as they appear in your code.

• whitespace-pre-line – Keeps line breaks but collapses multiple spaces into one.

• whitespace-pre-wrap – Preserves both spaces and line breaks, while still allowing text to wrap as needed.

whitespace-normal

This is the default text behavior in most browsers. Multiple spaces collapse into one, and line breaks are treated as a single space.

<p class="whitespace-normal">
	This text has extra spaces, but the browser will collapse them into one.
</p>

Preview

Use when: You want standard text flow and don’t need to preserve extra spaces or line breaks.

whitespace-nowrap

Prevents text from wrapping to the next line. Useful when you need content to stay on one line, like buttons, badges, or tags.

<p class="whitespace-nowrap bg-yellow-100 p-2">
	This text stays on one line even if it overflows. Making new information to be
	written and shown only in one line no matter how long the text is. But the
	world is not ending anytime soon though.
</p>

Preview

Use when: You want to keep elements single-line (e.g., navigation links or labels).

whitespace-pre

Preserves all spaces and line breaks exactly as they appear in the source code — similar to the <pre> HTML tag.

<div class="whitespace-pre">
	What is the magic word that solves every problem you can think of? There are
	many solutions out there but one stands out ask yourself what are you doing
	and what do you want ?
</div>

Preview

Use when: Displaying preformatted text, such as code, logs, or structured data.

whitespace-pre-line

Preserves line breaks but collapses multiple spaces into one. Ideal for formatted text that should keep line structure without preserving extra spaces.

<p class="whitespace-pre-line text-gray-700">
	This keeps     line breaks, but      extra spaces are collapsed. The extra  spaces  that appear on     
  texts are Collapsed  
</p>

Preview

Use when: You want readable, line-separated text — like quotes or testimonials.

whitespace-pre-wrap

Preserves both spaces and line breaks while still allowing text to wrap onto multiple lines if needed.

<p class="whitespace-pre-wrap">
	This preserves multiple spaces and line breaks while wrapping naturally.
</p>

Preview

Use when: Displaying structured text or content where spacing matters but wrapping is still needed.

Responsive Whitespace Behavior

Tailwind also supports responsive whitespace utilities, allowing you to adjust text behavior at different screen sizes. To do this, add a breakpoint prefix before the class name.

For example, the class md:whitespace-pre-wrap will apply the pre-wrap behavior on medium screens and above:

<p class="whitespace-normal md:whitespace-pre-wrap">
	This text uses normal whitespace by default, but from the medium breakpoint
	upward, it preserves whitespace and line breaks while wrapping text as needed.
</p>

Preview

In this example, the paragraph starts with normal whitespace (whitespace-normal), and from the medium breakpoint onward, it switches to preserving spaces and line breaks (md:whitespace-pre-wrap). This gives you flexible control over how your text behaves across different devices.

Real-World Applications of Whitespace

Whitespace utilities come in handy in many UI patterns. Here are a few practical examples:

1. Buttons and Labels — Prevent Text Wrapping

Note: Keeps button text on a single line, preventing awkward wrapping or resizing when text is long.

2. Code Blocks — Preserve Formatting

Note: Maintains original indentation and line breaks — ideal for displaying code or command outputs.

3. Testimonials or Quotes — Keep Line Breaks

Note: Keeps the author’s intended line breaks while maintaining clean wrapping and readability.

Tailwind CSS WhiteSpace Class Table

📚 Ready to Keep Going ?

• Tailwind Vertical align

Windframe Tailwind blocks

landing page