Tailwind Whitespace: How to Use Spacing Effectively
Let’s take a deep dive into Tailwind whitespace class in this article that extensively covers all the concepts with examples.
Using the white-space property in CSS, you can control how whitespace within an element is handled.
Web pages often use this property for controlling text formatting and element layout.
Tailwind Whitespace Classes
Tailwind CSS provides a range of classes that enable you to easily control whitespace in your website design.
Let’s take a closer look at Tailwind whitespace classes:
| Classes | Overview |
| whitespace-normal | This class is used to set the white-space property of an element to normal. This means that consecutive whitespace characters, such as spaces and tabs, are collapsed into a single space, and line breaks are treated as a single space. |
| whitespace-nowrap | An element’s white-space property is set to nowrap using this class. There will be no line breaks or wrapping in the text within the element. |
| whitespace-pre | This class sets an element’s white-space property to pre. All whitespace characters, such as spaces and tabs, and line breaks within the element will be preserved. |
| whitespace-pre-line | Using this class, you can set the white-space property of an element to pre-line. Line breaks will be preserved within the text, but consecutive whitespace characters, such as spaces and tabs, will be collapsed into a single space. |
| whitespace-pre-nowrap | An element’s white-space property is set to pre nowrap using this class. In other words, all whitespace characters and line breaks are preserved within the element, but the text is displayed on a single line without any line breaks. |
Syntax
<element class="whitespace-normal">...</element>
The following example showcases the implementation of whitespace-normal, whitespace-nowrap and whitespace-pre classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold text-gray-700 my-3">Whitespace Class in Tailwind CSS</p>
<div class="bg-gray-100 rounded-lg my-2">
<p class="p-4 whitespace-normal text-justify font-medium text-gray-700">
whitespace-normal:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
</p>
</div>
<div class="bg-gray-100 rounded-lg my-2">
<p class="p-4 whitespace-nowrap text-justify font-medium text-gray-700">
whitespace-nowrap:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
</p>
</div>
<div class="bg-gray-100 rounded-lg my-2">
<p class="p-4 whitespace-pre text-justify font-medium text-gray-700">
whitespace-pre:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
</p>
</div>
</body>
</html>
Below example demonstrates the whitespace-pre-line and whitespace-pre-nowrap classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold text-gray-700 my-3">Whitespace Class in Tailwind CSS</p>
<div class="bg-gray-100 rounded-lg my-2">
<p class="p-4 whitespace-pre-line text-justify font-medium text-gray-700">
whitespace-pre-line:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
</p>
</div>
<div class="bg-gray-100 rounded-lg my-2">
<p class="p-4 whitespace-pre-nowrap text-justify font-medium text-gray-700">
whitespace-pre-nowrap:
Aenean feugiat
lobortis imperdiet. Cras metus nunc, vulputate
eget lorem sodales, tempor mollis enim. Ut
tincidunt sem est. Ut sit amet venenatis quam,
a dignissim nisi.
</p>
</div>
</body>
</html>
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
