Tailwind CSS Whitespace Cheatsheet

Complete guide to Tailwind's whitespace utilities for controlling how text wraps and how spaces are handled.
Click any class to copy it to your clipboard.

Quick Reference

Class	Spaces	Newlines	Text Wrap
whitespace-normal	Collapsed	Collapsed	Wraps
whitespace-nowrap	Collapsed	Collapsed	No wrap
whitespace-pre	Preserved	Preserved	No wrap
whitespace-pre-line	Collapsed	Preserved	Wraps
whitespace-pre-wrap	Preserved	Preserved	Wraps
whitespace-break-spaces	Preserved + can break	Preserved	Wraps

Interactive Examples

Each box below shows the same text with different whitespace utilities applied. Notice how spaces and newlines are handled differently.

whitespace-normal

white-space: normal

Hello World! This is line 2. Indented line.

Collapses whitespace and wraps text normally. Multiple spaces become one.

whitespace-nowrap

white-space: nowrap

Hello World! This is line 2. Indented line.

Collapses whitespace but prevents text from wrapping to a new line.

whitespace-pre

white-space: pre

Hello World! This is line 2. Indented line.

Preserves whitespace and newlines exactly as written. Like <pre> tag.

whitespace-pre-line

white-space: pre-line

Hello World! This is line 2. Indented line.

Collapses spaces but preserves newlines. Text wraps when needed.

whitespace-pre-wrap

white-space: pre-wrap

Hello World! This is line 2. Indented line.

Preserves all whitespace and newlines. Text wraps when needed.

whitespace-break-spaces

white-space: break-spaces

Hello World! This is line 2. Indented line.

Like pre-wrap, but trailing spaces hang and spaces can break lines.

Visual Comparison

Here's the same long text with multiple spaces and newlines, shown in a constrained width container:

whitespace-normal

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

whitespace-nowrap

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

whitespace-pre

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

whitespace-pre-line

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

whitespace-pre-wrap

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

whitespace-break-spaces

This text has multiple spaces and newlines to demonstrate how each whitespace utility handles them.

Common Use Cases

Code Blocks

whitespace-pre

<pre class="whitespace-pre">
  function hello() {
    return "world";
  }
</pre>

Prevent Text Wrap

whitespace-nowrap

<span class="whitespace-nowrap">
  Don't break this line
</span>

User-Submitted Text

whitespace-pre-wrap

<p class="whitespace-pre-wrap">
  {userComment}
</p>

Preserve Line Breaks

whitespace-pre-line

<address class="whitespace-pre-line">
  123 Main Street
  City, State 12345
</address>

Detailed Breakdown

whitespace-normal

Default browser behavior. Sequences of whitespace collapse into a single space. Text wraps at the edge of the container.

Input: "Hello World!\nNew Line"

Hello World! New Line

whitespace-nowrap

Whitespace collapses like normal, but text never wraps to a new line. Useful for badges, tags, or preventing awkward line breaks.

Even in a narrow container, this text won't wrap:

This is a very long text that will not wrap no matter what

whitespace-pre

Preserves all whitespace exactly as written. Great for code blocks, ASCII art, or any preformatted text.

Spaces and newlines are preserved:

Line 1 Line 2 (indented) Line 3 (more indent)

whitespace-pre-line

Newlines are preserved but multiple spaces collapse. Perfect for displaying addresses or poetry where line breaks matter but extra spaces don't.

Newlines kept, spaces collapsed:

Company Name 123 Main Street City, State 12345

whitespace-pre-wrap

Best of both worlds: preserves whitespace but also wraps long lines. Ideal for user comments, chat messages, or any text where formatting matters.

Preserves everything AND wraps:

This line has multiple spaces preserved. And this is a new line. This very long line will wrap when it reaches the edge of the container unlike whitespace-pre.

whitespace-break-spaces

Similar to pre-wrap, but sequences of spaces can break to a new line, and trailing spaces at the end of a line hang outside the box.

Spaces can cause line breaks:

Word Word Word Word Word Word

About Tailwind Whitespace

Tailwind's whitespace utilities control the CSS white-space property, which determines how whitespace inside an element is handled.

These utilities are particularly useful when working with user-generated content, code blocks, or any text where formatting and line breaks need to be preserved.

For responsive whitespace, use breakpoint prefixes: md:whitespace-pre, lg:whitespace-normal

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect whitespace, typography, spacing, and more with just one click.

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 →