Tailwind CSS Whitespace - GeeksforGeeks

23 Mar, 2022
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS white-space property. This class is used to control the text wrapping and white-spacing. There are several types of values in this property to use.
Whitespace classes:
whitespace-normal 
whitespace-nowrap 
whitespace-pre 
whitespace-pre-line 
whitespace-pre-wrap 
whitespace-normal: This is the default value of this class. When the whitespace class of tailwind is set to normal, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will wrap wherever necessary.
Syntax:
<element class="whitespace-normal">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Whitespace Class</b>     <div class="mx-24 bg-green-200 rounded-lg">        <p class="p-4 whitespace-normal text-justify">            Geeksforgeeks: A Computer Science portal for Geeks             those who wants to pursue an engineering degree or            wants to create a career on engineering field.        </p>        </div></body>   </html> 
Output:
whitespace-normal
whitespace-nowrap: When the whitespace class of tailwind is set to nowrap, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will not be wrapped to a new line unless explicitly specified.
Syntax:
<element class="whitespace-nowrap">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Whitespace Class</b>     <div class="mx-24 bg-green-200 rounded-lg">        <p class="p-4 whitespace-nowrap text-justify">            Geeksforgeeks: A Computer Science portal for Geeks             those who wants to pursue an engineering degree or            wants to create a career on engineering field.        </p>        </div></body>   </html> 
Output:
whitespace-nowrap
whitespace-pre: This value makes the whitespace have the same effect as the <pre>tag in HTML. The content in the element will wrap only when specified using line breaks.
Syntax:
<element class="whitespace-pre">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Whitespace Class</b>     <div class="mx-24 bg-green-200 rounded-lg">        <p class="p-4 whitespace-pre text-justify">            Geeksforgeeks: A Computer Science portal for Geeks             those who wants to pursue an engineering degree or            wants to create a career on engineering field.        </p>        </div></body>   </html> 
Output:
whitespace-pre
whitespace-pre-line: When the whitespace class of tailwind is set to pre-line value, every sequence of two or more whitespaces will appear as a single whitespace. The content in the element will be wrapped when required and when explicitly specified.
Syntax:
<element class="whitespace-pre-line">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Whitespace Class</b>     <div class="mx-24 bg-green-200 rounded-lg">        <p class="p-4 whitespace-pre-line text-justify">            Geeksforgeeks: A Computer Science portal for Geeks             those who wants to pursue an engineering degree or            wants to create a career on engineering field.        </p>        </div></body>   </html> 
Output:
whitespace-pre-line
whitespace-pre-wrap: When the whitespace class of tailwind is set to a pre-line value, every sequence of whitespaces will appear as it is. The content in the element will be wrapped when required and when explicitly specified.
Syntax:
<element class="whitespace-pre-wrap">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Whitespace Class</b>     <div class="mx-24 bg-green-200 rounded-lg">        <p class="p-4 whitespace-pre-wrap text-justify">            Geeksforgeeks: A Computer Science portal for Geeks             those who wants to pursue an engineering degree or            wants to create a career on engineering field.        </p>        </div></body>   </html> 
Output:
whitespace-pre-wrap
clintra
Tailwind CSS
Tailwind-Typography
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?