Tailwind CSS - Whitespace

Tailwind CSS: Controlling Whitespace

Tailwind’s whitespace utilities give you precise control over how whitespace (spaces, tabs, newlines) and text wrapping are handled within an element. Mastering these classes is key to building robust and predictable layouts.

Pro Tip: The whitespace utilities are often combined with overflow and text-overflow classes (like truncate) to manage long content gracefully.

Whitespace Utility Classes

Here are the primary classes for controlling text wrapping and whitespace preservation.

Class	CSS Property & Behavior
whitespace-normal	white-space: normal; (Default) Text wraps as usual.
whitespace-nowrap	white-space: nowrap; Text will not wrap to the next line.
whitespace-pre	white-space: pre; Preserves all whitespace and newlines. Text only wraps on line breaks in the source code.
whitespace-pre-line	white-space: pre-line; Collapses sequences of whitespace but preserves newlines.
whitespace-pre-wrap	white-space: pre-wrap; Preserves whitespace but allows text to wrap.
whitespace-break-spaces	white-space: break-spaces; Similar to pre-wrap, but any sequence of preserved whitespace can be wrapped.

Practical Examples

The following examples demonstrate common use cases for the whitespace utilities in a modern UI.

Example 1: Preventing Wrap and Truncating Text

A common pattern for UI elements like buttons or table cells is to prevent text from wrapping and show an ellipsis (…) if it’s too long. This is achieved by combining whitespace-nowrap with overflow-hidden and truncate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Whitespace Truncation Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-xs mx-auto">
    <button class="w-full bg-blue-500 text-white font-bold py-2 px-4 rounded overflow-hidden whitespace-nowrap text-ellipsis">
      This is a very long text that will be truncated.
    </button>
    <!-- The class `truncate` is a shorthand for the above three utilities -->
    <button class="mt-4 w-full bg-green-500 text-white font-bold py-2 px-4 rounded truncate">
      This is a very long text that will be truncated.
    </button>
  </div>
</body>
</html>

Example 2: Formatting Code Snippets

When displaying code, you want to preserve indentation and line breaks exactly as they are in the source. whitespace-pre-wrap is perfect for this, as it maintains formatting while still allowing the container to be responsive.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Whitespace Code Block Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

<div class="max-w-2xl mx-auto">
  <h2 class="text-xl font-semibold text-slate-800 mb-2">Code Example:</h2>
  <pre class="bg-slate-800 text-white p-4 rounded-lg overflow-x-auto">
    <code class="whitespace-pre-wrap font-mono text-sm">
function greet() {
  // This function greets the user.
  console.log("Hello, World!");
}
    </code>
  </pre>
</div>

</body>
</html>

Responsive Whitespace Control

Like most Tailwind utilities, whitespace classes can be applied conditionally at different breakpoints. For instance, you might want text to wrap on small screens but stay on one line on larger screens.

<!-- Text wraps on small screens, but not on medium screens and up -->
<p class="whitespace-normal md:whitespace-nowrap">
  This text will wrap on mobile but will form a single line on desktop.
</p>

Common Pitfalls & Debugging

• Unexpected Horizontal Scroll: Applying whitespace-nowrap to an element can cause its container to overflow horizontally. Ensure the parent has overflow-hidden or a similar constraint if this is not desired.
• truncate Not Working: The truncate utility requires the element to have a defined width constraint (e.g., w-full, max-w-md, or be in a flex/grid container) to work correctly.