Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Whitespace

  • Last Updated : 23 Jun, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :