Open In App

Tailwind CSS Display

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS display property. This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.

Display Classes:

  • block: It is used to display an element as a block element.
  • inline-block: It is used to display an element as an inline-level block container.
  • inline: It is used to display an element as an inline element.
  • flex: It is used to display an element as a block-level flex container.
  • inline-flex: It is used to display an element as an inline-level flex container.
  • table: It is used to set the behavior as <table> for all elements.
  • table-caption:  It is used to set the behavior as <caption> for all elements.
  • table-cell: It is used to set the behavior as <td> for all elements.
  • table-column: It is used to set the behavior as <col> for all elements.
  • table-column-group: It is used to set the behavior as <column> for all elements.
  • table-footer-group: It is used to set the behavior as <footer> for all elements.
  • table-header-group: It is used to set the behavior as <header> for all elements.
  • table-row-group: It is used to set the behavior as <row> for all elements.
  • table-row: It is used to set the behavior as <tr> for all elements.
  • flow-root: It is used to set the default value.
  • grid: It is used to display an element as a block-level grid container.
  • inline-grid: It is used to display an element as an inline-level grid container.
  • contents: It is used to disappear the container.
  • hidden: It is used to remove the element.

block: It is used to display an element as a block-level element. This class is used as the default property of div. This class places the div one after another vertically. The height and width of the div can be changed using the block class if the width is not mentioned, then the div under block class will take up the width of the container.

Syntax:

<element display="block">...</element>

Example 1:

HTML




<!DOCTYPE html> 
<head>     
    <link href=
    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
     rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS block Class</b
    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="block h-12 bg-green-500 rounded-lg">1</span>
        <span class="block h-12 bg-green-500 rounded-lg">2</span>
        <span class="block h-12 bg-green-500 rounded-lg">3</span>
    </div
</center>
</body
  
</html>


Output:

inline-block: It is used to display an element as an inline-level block container. This feature uses both properties mentioned above, block and inline. So, this class aligns the div inline but the difference is it can edit the height and the width of the block. Basically, this will align the div both in the block and inline fashion.

Syntax:

<element display="inline-block">...</element>

Example 2: 

HTML




<!DOCTYPE html> 
<head>     
    <link href=
    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
     rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS inline-block Class</b
    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">1</span>
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">2</span>
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">3</span>
    </div
</center>
</body
  
</html>


Output:

inline: It is used to display an element as an inline element. This class is the default property of anchor tags. This is used to place the div inline i.e. in a horizontal manner. The inline display property ignores the height and the width set by the user.

Syntax:

<element display="inline">...</element>

Example 3:

HTML




<!DOCTYPE html> 
<head>     
    <link href=
    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
     rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS inline Class</b
    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="inline bg-green-500 rounded-lg">1</span>
        <span class="inline bg-green-500 rounded-lg">2</span>
        <span class="inline bg-green-500 rounded-lg">3</span>
    </div
</center>
</body
  
</html>


Output:

flex: The flex class is much responsive and mobile-friendly. It is easy to position child elements and the main container. The margin doesn’t collapse with the content margins. The order of any element can be easily changed without editing the HTML section.

Syntax:

<element display="flex">...</element>

Example 4: 

HTML




<!DOCTYPE html> 
<head
      
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"
</head
  
<body class="text-center"
<center>
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1
    <b>Tailwind CSS flex Class</b
    <div class="flex bg-green-200 p-4 mx-16 ">
        <div class="flex-1 bg-green-500 rounded-lg">1</div>
        <div class="flex-1 bg-green-500 rounded-lg">2</div>
        <div class="flex-1 bg-green-500 rounded-lg">3</div>
    </div
</center>
</body
  
</html>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads