Tailwind CSS - Whitespace

Previous
Quiz
Next

Tailwind CSS Whitespace is a collection of predefined classes that control how spaces, tabs, and line breaks between text are managed and displayed within text and layout elements.

Whitespace refers to empty areas that help organize and separate content from other elements.

Tailwind CSS Whitespace Classes

Below is a list of Tailwind CSS whitespace classes with properties for managing whitespace in text and layout elements.

Class CSS Properties
whitespace-normal white-space: normal;
whitespace-nowrap white-space: nowrap;
whitespace-pre white-space: pre;
whitespace-pre-line white-space: pre-line;
whitespace-pre-wrap white-space: pre-wrap;
whitespace-break-spaces white-space: break-spaces;

Functionality Of Tailwind CSS Whitespace Classes

  • whitespace-normal: This class wraps text normally within its container.
  • whitespace-nowrap: This class keeps text on a single line without wrapping.
  • whitespace-pre: This class preserves spaces and line breaks as written.
  • whitespace-pre-line: This class keeps line breaks but merges consecutive spaces.
  • whitespace-pre-wrap: This class keeps spaces and wraps text to fit within its container.
  • whitespace-break-spaces: This class is similar to whitespace-normal but allows additional wrapping where necessary to prevent overflow and respects white spaces in the content.

Tailwind CSS Whitespace Class Examples

Below are examples of Tailwind CSS Whitespace classes that show how to manage and control spacing and wrapping behavior in text and layout elements.

Normal Wrap within an Element

This example shows how to handle text wrapping within its container using Tailwind CSS utility classes.

Example

 
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-nowrap:
    </h3> 
    <div class="mx-auto bg-gray-200">
        <div class="whitespace-normal"> 
                What's up?
                Explore       Tailwind CSS whitespace
                classes like       whitespace-normal        for 
                better handling of spaces, tabs, and line breaks 
                in text and layouts.      Boost your knowledge 
                with 
                Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>

Preventing Text Wrapping

This example shows the use of Tailwind CSS's whitespace-nowrap class to prevent text from wrapping, ensuring it remains on a single line within a designated container.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-nowrap:
    </h3> 
    <div class="mx-auto bg-gray-200  max-w-3xl">
        <div class="whitespace-nowrap"> 
            What's up?
            Explore       Tailwind CSS whitespace
            classes like       whitespace-nowrap        for 
            better handling of spaces, tabs, and line breaks 
            in text and layouts.      Boost your knowledge 
            with 
            Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>

Enhancing Text Formatting

This example shows the application of the whitespace-pre utility class from Tailwind CSS. The class is applied to a <div> element to showcase how it maintains text formatting within a designated container.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-pre:
    </h3> 
    <div class="mx-auto bg-gray-200 ">
        <div class="whitespace-pre"> 
            What's up?
            Explore       Tailwind CSS whitespace
            classes like       whitespace-pre       for 
            better handling of spaces, tabs, and line breaks 
            in text and layouts.      Boost your knowledge 
            with 
            Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>

Preserving Line Breaks

This example shows the use of the whitespace-pre-line utility class in Tailwind CSS to improve text presentation by preserving its original formatting.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-pre-line:
    </h3> 
    <div class="mx-auto bg-gray-200 ">
        <div class="whitespace-pre-line"> 
            What's up?
            Explore       Tailwind CSS whitespace
            classes like       whitespace-pre-line       for 
            better handling of spaces, tabs, and line breaks 
            in text and layouts.      Boost your knowledge 
            with 
            Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>

Managing Text Layout

This example shows the use of Tailwind CSS whitespace-pre-wrap to keep newlines and spaces within an element. The text will be wrapped normally.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-pre-wrap:
    </h3> 
    <div class="mx-auto bg-gray-200 ">
        <div class="whitespace-pre-wrap"> 
            What's up?
            Explore       Tailwind CSS whitespace
            classes like      whitespace-pre-wrap      for 
            better handling of spaces, tabs, and line breaks 
            in text and layouts.      Boost your knowledge 
            with 
            Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>

Improving Text Readability

This example shows how Tailwind CSS whitespace-break-spaces can be used to preserve spaces and tabs in the text, thereby enhancing content presentations on web pages.

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Whitespace
    </h2> 
    <h3 class="underline font-bold mb-6">
        Applying whitespace-break-spaces:
    </h3> 
    <div class="mx-auto bg-gray-200 ">
        <div class="whitespace-break-spaces"> 
            What's up?  
            
            Explore   Tailwind CSS whitespace
            classes like whitespace-break-spaces       for 
            better handling of spaces, tabs, and line breaks 
            in text and layouts.      Boost your knowledge 
            with 
            Tutorialspoint's Tailwind tutorials!
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next