Tailwind CSS Whitespace

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:

Output:

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:

Output:

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:

Output:

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:

Output:

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:

Output: