Browser Support

Menu

Tailwind CSS Whitespace

Whitespace determines how the white space inside a text element is managed. Whether it's ensuring proper line breaks, preserving indentation, or handling whitespace inside preformatted text, whitespace is critical for developing polished and readable interfaces.

Tailwind CSS simplifies working with whitespace by offering a rich set of utility classes. These utilities allow you to apply whitespace-related behaviors directly to the HTML elements without writing custom CSS. This guide dives into these classes, explaining their applications, conditional styling, customization options, and more.

Class	Properties	Example
`whitespace-normal`	`white-space: normal;`	`<div className="whitespace-normal"></div>`
`whitespace-nowrap`	`white-space: nowrap;`	`<div className="whitespace-nowrap"></div>`
`whitespace-pre`	`white-space: pre;`	`<div className="whitespace-pre"></div>`
`whitespace-pre-line`	`white-space: pre-line;`	`<div className="whitespace-pre-line"></div>`
`whitespace-pre-wrap`	`white-space: pre-wrap;`	`<div className="whitespace-pre-wrap"></div>`
`whitespace-break-spaces`	`white-space: break-spaces;`	`<div className="whitespace-break-spaces"></div>`

Overview of Whitespace

Normal Wrapping

The default whitespace handling in most browsers is white-space: normal;. It enables text wrapping at appropriate points without preserving extra spaces or line breaks.

This is a live editor. Play around with it!

export default function NormalWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="whitespace-normal h-screen p-4">
        {/* white-space: normal */}
        {`This sentence will wrap text onto multiple lines depending on the width of its container. It will not preserve extra
        spaces or newlines.`}
      </p>
    </div>
  );
}

No Wrapping

To prevent text from wrapping to a new line, use white-space: nowrap;. This is helpful for keeping single-line titles or preventing unintended line breaks.

This is a live editor. Play around with it!

export default function NoWrapWhitespace() {
  return (
    <div className="h-screen w-screen overflow-auto">
      <p className="whitespace-nowrap p-4">
        {/* white-space: nowrap */}
        {`This sentence will remain on a single line, extending horizontally without wrapping.`}
      </p>
    </div>
  );
}

Preserve Formatting

To preserve spaces, tabs, and newlines in text, use white-space: pre;. This utility mimics the behavior of the <pre> HTML tag.

This is a live editor. Play around with it!

export default function PreWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="whitespace-pre p-4">
        {/* white-space: pre */}
        {`Raw text:    
         Indentation,     
        Tabs, and        
          Line breaks are preserved.`}
      </p>
    </div>
  );
}

Line Wrapping with Formatting

Using white-space: pre-line; keeps text wrapping enabled while also preserving single line breaks.

This is a live editor. Play around with it!

export default function PreLineWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="whitespace-pre-line p-4">
        {/* white-space: pre-line */}
        {`This sentence will wrap text onto multiple lines and preserve     
        single newline characters in the original content.`}
      </p>
    </div>
  );
}

Wrap and Retain Whitespace

If you need wrapped text while retaining extra spaces and line breaks, use white-space: pre-wrap;.

This is a live editor. Play around with it!

export default function PreWrapWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="whitespace-pre-wrap p-4">
        {/* white-space: pre-wrap */}
        {`Retain spaces      and  
        line breaks while still  
        wrapping the text onto new lines as needed.`}
      </p>
    </div>
  );
}

Preserve Visible Whitespace

For scenarios requiring exact rendering of all whitespace (including non-breaking space characters), break-spaces is the ideal utility (white-space: break-spaces;).

This is a live editor. Play around with it!

export default function BreakSpacesWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="whitespace-break-spaces p-4">
        {/* white-space: break-spaces */}
        {`This utility allows all whitespace to be preserved,    
        including spaces that don't break unless explicitly   
        forced by the user.`}
      </p>
    </div>
  );
}

States and Responsiveness

Tailwind CSS enables conditional application of the white-space utilities using pseudo-state modifiers and responsive design. This section explores these features.

Hover and Focus States

Tailwind modifiers can dynamically update whitespace styles when elements are hovered or focused. For example, you can switch between different whitespace behaviors:

This is a live editor. Play around with it!

export default function HoverFocusWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p tabindex="0" className="hover:whitespace-pre-wrap focus:whitespace-nowrap p-4">
        {/* Hover: white-space: pre-wrap; */}
        {/* Focus: white-space: nowrap; */}
        {`Hover to reformat
        whitespace or focus to prevent
        wrapping entirely.`}
      </p>
    </div>
  );
}

Breakpoint Modifiers

Responsive utilities in Tailwind allow developers to fine-tune whitespace styles at different screen sizes. For example, you might preserve whitespace for small screens but use normal wrapping on larger screens:

This is a live editor. Play around with it!

export default function BreakpointsWhitespace() {
  return (
    <div className="h-screen w-screen">
      <p className="sm:whitespace-pre md:whitespace-normal lg:whitespace-nowrap p-4">
        {/* Small: white-space: pre; */}
        {/* Medium: white-space: normal; */}
        {/* Large: white-space: nowrap; */}
        This sentence changes whitespace handling based on the screen size.
      </p>
    </div>
  );
}

Real World Examples

Product Card Grid

A responsive grid layout showcasing product cards with pre-formatted descriptions using whitespace-pre-wrap.

This is a live editor. Play around with it!

const ProductGrid = () => {
  const products = [
    {
      id: 1,
      name: "Leather Messenger Bag",
      description: `Handcrafted genuine leather
Perfect for daily use
Fits 15" laptop`,
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62",
      alt: "Brown leather messenger bag"
    },
    {
      id: 2,
      name: "Smart Watch Elite",
      description: `Health tracking
Sleep monitoring
ECG enabled`,
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Black smartwatch on wrist"
    },
    {
      id: 3,
      name: "Ultra HD Camera",
      description: `48MP sensor
4K video
Wifi enabled`,
      price: "$899.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional camera front view"
    },
    {
      id: 4,
      name: "Ergonomic Chair",
      description: `Lumbar support
Adjustable height
Breathable mesh`,
      price: "$399.99",
      src: "https://images.unsplash.com/photo-1580480055273-228ff5388ef8",
      alt: "Black ergonomic office chair"
    },
    {
      id: 5,
      name: "Mechanical Keyboard",
      description: `Cherry MX switches
RGB backlight
Hot-swappable`,
      price: "$149.99",
      src: "https://images.unsplash.com/photo-1595225476474-87563907a212",
      alt: "RGB mechanical keyboard"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {products.map(product => (
        <div key={product.id} className="bg-white rounded-lg shadow-md overflow-hidden">
          <img 
            src={product.src} 
            alt={product.alt}
            className="w-full h-48 object-cover"
          />
          <div className="p-4">
            <h3 className="text-lg font-semibold">{product.name}</h3>
            <p className="whitespace-pre-wrap text-sm text-gray-600 my-2 font-sans">
              {product.description}
            </p>
            <p className="text-blue-600 font-bold">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProductGrid;

Blog Post List

A modern blog list interface utilizing whitespace-normal.

This is a live editor. Play around with it!

const BlogList = () => {
  const posts = [
    {
      id: 1,
      title: "The Future of Artificial Intelligence in Healthcare",
      content: "Recent advancements in AI have revolutionized the healthcare industry. Machine learning algorithms are now capable of detecting diseases earlier than ever before, while neural networks assist in drug discovery and development.",
      author: "Dr. Sarah Chen",
      date: "2024-01-15",
      src: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d",
      alt: "AI healthcare visualization"
    },
    {
      id: 2,
      title: "Sustainable Architecture: Building for Tomorrow",
      content: "Green building practices are reshaping modern architecture. From solar panels to living walls, architects are finding innovative ways to reduce environmental impact while creating stunning spaces.",
      author: "Michael Torres",
      date: "2024-01-14",
      src: "https://images.unsplash.com/photo-1518005068251-37900150dfca",
      alt: "Sustainable building design"
    },
    {
      id: 3,
      title: "The Rise of Plant-Based Cuisine",
      content: "Plant-based eating has moved from trend to lifestyle. Chefs worldwide are creating innovative dishes that prove vegetables can be the star of any meal, changing how we think about food.",
      author: "Emma Roberts",
      date: "2024-01-13",
      src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd",
      alt: "Colorful plant-based dish"
    },
    {
      id: 4,
      title: "Digital Nomads: The New Workforce",
      content: "Remote work has created a new class of professionals who combine work with travel. This lifestyle is reshaping both the corporate world and the tourism industry.",
      author: "James Wilson",
      date: "2024-01-12",
      src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f",
      alt: "People working remotely"
    },
    {
      id: 5,
      title: "The Science of Sleep",
      content: "New research reveals the crucial role of quality sleep in mental health, physical recovery, and cognitive performance. Understanding sleep cycles can help optimize rest.",
      author: "Dr. Lisa Park",
      date: "2024-01-11",
      src: "https://images.unsplash.com/photo-1541781774459-bb2af2f05b55",
      alt: "Peaceful sleep environment"
    },
    {
      id: 6,
      title: "Space Tourism: The Next Frontier",
      content: "Commercial space travel is becoming a reality. Companies are developing technologies to make space accessible to civilians, promising an entirely new type of tourism.",
      author: "Alex Martinez",
      date: "2024-01-10",
      src: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa",
      alt: "Space view of Earth"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-8">
      {posts.map(post => (
        <article key={post.id} className="bg-white rounded-lg shadow-md overflow-hidden">
          <div className="md:flex">
            <div className="md:w-1/3">
              <img 
                src={post.src} 
                alt={post.alt}
                className="h-48 w-full object-cover"
              />
            </div>
            <div className="p-6 md:w-2/3">
              <h2 className="text-xl font-bold mb-2">{post.title}</h2>
              <p className="whitespace-normal line-clamp-2 text-gray-600 mb-4">
                {post.content}
              </p>
              <div className="flex justify-between items-center text-sm text-gray-500">
                <span>{post.author}</span>
                <span>{post.date}</span>
              </div>
            </div>
          </div>
        </article>
      ))}
    </div>
  );
};

export default BlogList;

Code Block Display

A developer-friendly code snippet showcase using whitespace-pre to display formatted code blocks.

This is a live editor. Play around with it!

const CodeSnippets = () => {
  const snippets = [
    {
      id: 1,
      language: "JavaScript",
      title: "Array Methods",
      code: `const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled);`,
      difficulty: "Beginner"
    },
    {
      id: 2,
      language: "Python",
      title: "List Comprehension",
      code: `numbers = [1, 2, 3, 4, 5]
doubled = [x * 2 for x in numbers]
print(doubled)`,
      difficulty: "Intermediate"
    },
    {
      id: 3,
      language: "Ruby",
      title: "Array Manipulation",
      code: `numbers = [1, 2, 3, 4, 5]
doubled = numbers.map { |n| n * 2 }
puts doubled`,
      difficulty: "Beginner"
    },
    {
      id: 4,
      language: "Go",
      title: "Slice Operations",
      code: `numbers := []int{1, 2, 3, 4, 5}
doubled := make([]int, len(numbers))
for i, n := range numbers {
  doubled[i] = n * 2
}
fmt.Println(doubled)`,
      difficulty: "Advanced"
    },
    {
      id: 5,
      language: "TypeScript",
      title: "Array Operations",
      code: `const numbers: number[] = [1, 2, 3, 4, 5];
const doubled: number[] = numbers.map(
  (n: number): number => {
    return n * 2;
});
console.log(doubled);`,
      difficulty: "Intermediate"
    }
  ];

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      {snippets.map(snippet => (
        <div key={snippet.id} className="bg-gray-800 rounded-lg overflow-hidden">
          <div className="flex justify-between items-center px-4 py-2 bg-gray-700">
            <div>
              <span className="text-white font-semibold">{snippet.language}</span>
              <span className="mx-2 text-gray-400">•</span>
              <span className="text-gray-400">{snippet.title}</span>
            </div>
            <span className="px-2 py-1 rounded text-sm bg-gray-600 text-white">
              {snippet.difficulty}
            </span>
          </div>
          <p className="p-4 whitespace-pre break-all bg-gray-800 text-gray-100 font-mono text-xs overflow-scroll">
            {snippet.code}
          </p>
        </div>
      ))}
    </div>
  );
};

export default CodeSnippets;

Poetry Display

An artistic poetry gallery using whitespace-pre-line to display poems with proper line breaks and spacing.

This is a live editor. Play around with it!

const PoemGallery = () => {
  const poems = [
    {
      id: 1,
      title: "Whispers of Dawn",
      author: "Emily Chen",
      content: `Morning light breaks
Through window panes
Silent awakening
New day begins`,
      background: "https://images.unsplash.com/photo-1470252649378-9c29740c9fa8",
      theme: "Nature"
    },
    {
      id: 2,
      title: "Urban Dreams",
      author: "Marcus Rivera",
      content: `Steel and glass
Reach for stars
City lights flicker
Endless cars`,
      background: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df",
      theme: "City Life"
    },
    {
      id: 3,
      title: "Ocean's Lullaby",
      author: "Sarah Thompson",
      content: `Waves crash soft
On sandy shore
Salt air whispers
Forevermore`,
      background: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
      theme: "Ocean"
    },
    {
      id: 4,
      title: "Mountain Song",
      author: "David frost",
      content: `Peaks touch clouds
Wind howls free
Eternal snow caps
Majesty`,
      background: "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b",
      theme: "Mountains"
    },
    {
      id: 5,
      title: "Desert Dreams",
      author: "Amira Hassan",
      content: `Golden sands shift
Under burning sun
Mirages dance
Day is done`,
      background: "https://images.unsplash.com/photo-1509316785289-025f5b846b35",
      theme: "Desert"
    },
    {
      id: 6,
      title: "Forest Whispers",
      author: "Michael Green",
      content: `Ancient trees sway
Secrets kept deep
Moss-covered stones
Mysteries sleep`,
      background: "https://images.unsplash.com/photo-1448375240586-882707db888b",
      theme: "Forest"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100">
      {poems.map(poem => (
        <div 
          key={poem.id} 
          className="relative overflow-hidden rounded-lg shadow-lg group h-96"
        >
          <img
            src={poem.background}
            alt={poem.title}
            className="absolute inset-0 w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black bg-opacity-50 transition-opacity group-hover:bg-opacity-75">
            <div className="h-full p-6 flex flex-col justify-between">
              <div>
                <h3 className="text-2xl font-bold text-white mb-2">{poem.title}</h3>
                <p className="text-gray-300">by {poem.author}</p>
                <span className="inline-block px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm text-white mt-2">
                  {poem.theme}
                </span>
              </div>
              <p className="whitespace-pre-line text-white font-serif text-lg leading-relaxed mt-4">
                {poem.content}
              </p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default PoemGallery;

Chat Message Interface

A sleek chat interface implementing whitespace-break-spaces to properly display multi-line messages while maintaining natural conversation flow.

This is a live editor. Play around with it!

const ChatInterface = () => {
  const messages = [
    {
      id: 1,
      sender: "Alice Chen",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      content: `Hey team! I've just pushed the latest updates to the repository. Please review when you get a chance.`,
      timestamp: "9:00 AM"
    },
    {
      id: 2,
      sender: "Bob Smith",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      content: `Thanks Alice! I'll take a look at it right away.
Any specific areas you want me to focus on?`,
      timestamp: "9:05 AM"
    },
    {
      id: 3,
      sender: "Carol Davis",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      content: `I noticed some UI improvements in the commit messages. Looking forward to seeing the changes!`,
      timestamp: "9:10 AM"
    },
    {
      id: 4,
      sender: "David Wilson",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      content: `The new animation effects look smooth.
Great work on optimizing the performance!`,
      timestamp: "9:15 AM"
    },
    {
      id: 5,
      sender: "Eva Martinez",
      avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      content: `I'll test it on different devices to ensure cross-browser compatibility.`,
      timestamp: "9:20 AM"
    },
    {
      id: 6,
      sender: "Frank Johnson",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      content: `Let's schedule a quick call to discuss the implementation details.
I have a few suggestions for the API integration.`,
      timestamp: "9:25 AM"
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6 bg-gray-50 rounded-lg">
      <div className="space-y-4">
        {messages.map(message => (
          <div key={message.id} className="flex items-start space-x-4">
            <img 
              src={message.avatar} 
              alt={message.sender}
              className="w-10 h-10 rounded-full"
            />
            <div className="flex-1">
              <div className="flex items-baseline space-x-2">
                <h4 className="font-semibold">{message.sender}</h4>
                <span className="text-sm text-gray-500">{message.timestamp}</span>
              </div>
              <p className="mt-1 text-gray-700 whitespace-break-spaces">
                {message.content}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ChatInterface;

Best Practices

Maintain Design Consistency

Maintaining consistency in web design is crucial to deliver the best user experience. Use project-wide patterns that incorporate the same Whitespace rules for recurring interface sections, like cards, form controls, and lists.

By applying a uniform approach, you reduce the chance of styles clashing or feeling inconsistent. Not only will this enhance usability, but it will also save development time. Once consistent Whitespace patterns are in place, new pages and features can reuse those patterns quickly.

Leverage Utility Combinations

Tailwind allows you to combine multiple utilities for cleaner, more flexible designs. When using whitespace, pair it with typography classes to create visually appealing layouts. For example, combining whitespace-* utilities with font utilities like text-2xl, font-bold can ensure proper line wrapping, aesthetics, and readability.

Avoid overloading elements with conflicting utility classes. Stick to combining only necessary utilities, ensuring your code remains clear and maintainable. This approach keeps your styles easier to understand and prevents redundancy.

Test utility combinations across breakpoints using responsive variants like md:, lg:, and xl:. This ensures your spacing adjusts effectively on different screen sizes, keeping your layouts flexible and visually consistent.

Debugging Common Issues

Resolve Common Problems

Even with well-thought-out spacing strategies, certain pitfalls are easy to stumble upon. One frequent challenge is unintended overflow, where elements push outside their container, creating horizontal scrollbars or clipped content. This often arises from combining whitespace-* with fixed-width/height utilities. Checking and adjusting the height and width can address this problem.

Another commonly reported issue is inconsistent alignment across various breakpoints. Perhaps the text lines up perfectly on desktop, but looks misaligned on mobile. In such cases, confirm that the responsive classes are applied correctly. Tailwind’s responsive modifiers allow you to refine height, width, and whitespace at each screen size, ensuring that your design remains consistent across devices.

Iterative Testing and Maintenance

Maintaining perfect Whitespace across a large codebase requires a systematic approach. Start with small, incremental changes whenever you refine spacing, especially in widely used components. Updating a global whitespace-* utility can have a cascading impact across your site.

Use version control to ensure that you can track and revert changes if something breaks unexpectedly. Iterative testing should involve both visual reviews and automated checks where possible. Visual reviews help catch alignment issues that automated tools might miss, especially for more detailed layouts.

Hyphens Content