Tailwind CSS Display
This class accepts more than one value in Tailwind CSS. All the properties are covered in a 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 Utilitiy classes in Tailwind css
This classes are predefine by tailwind css you can easily use this class in element
Class
Properties
-
block
display: block;
-
inline-block
display: inline-block;
-
inline
display: inline;
-
flex
display: flex;
-
inline-flex
display: inline-flex;
-
table
display: table;
-
table-caption
Dspplay: table-caption;
-
table-cell
display: table-cell;
-
table-column
display: table-column;
-
table-column-group
display: table-colum-group;
-
table-footer-group
display: table-footer-group;
-
table-header-group
display: table-header-group;
-
table-row-group
display: table-row-group;
-
table-row
display: table-row;
-
flow-root
display: flow-root;
-
grid
display: grid;
-
inline-grid
display: inline-grid;
-
contents
display: contents;
-
list-item
display: list-item;
-
hidden
display: none;
Tailwind css Display 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.
<div class="bg-indigo-200 p-4 mx-16 space-y-4 mt-4 rounded-md">
<span class="block h-12 bg-indigo-600 rounded-lg pt-3 text-white">1</span>
<span class="block h-12 bg-indigo-600 rounded-lg pt-3 text-white">2</span>
<span class="block h-12 bg-indigo-600 rounded-lg pt-3 text-white">3</span>
</div>
Tailwind css Display 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.
<div class="bg-indigo-200 p-4 mx-16 space-y-4 mt-4 ">
<span class="inline-block w-32 h-12 bg-indigo-600 text-white pt-3 rounded-lg">1</span>
<span class="inline-block w-32 h-12 bg-indigo-600 text-white pt-3 rounded-lg">2</span>
<span class="inline-block w-32 h-12 bg-indigo-600 text-white pt-3 rounded-lg">3</span>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css Display 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.
<div class="bg-indigo-200 p-4 mx-16 space-y-4 mt-4 ">
<span class="inline px-4 py-3 bg-indigo-600 text-white pt-3 rounded-lg">1</span>
<span class="inline px-4 py-3 bg-indigo-600 text-white pt-3 rounded-lg">2</span>
<span class="inline px-4 py-3 bg-indigo-600 text-white pt-3 rounded-lg">3</span>
</div>Tailwind css Display 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.
To Learn more about display flex and flex alignments:-
Go To Page<div class="flex bg-indigo-200 rounded-md p-4 mx-16 gap-2 mt-4 ">
<div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">1</div>
<div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">2</div>
<div class="flex-1 py-3 bg-indigo-600 text-white rounded-lg">3</div>
</div>Tailwind css Display inline-flex
In Tailwind CSS, the inline-flex utility is used to apply the display: inline-flex; CSS property to an element. This makes the element behave like a flex container while also making it inline, meaning it will sit inline with other elements on the same line, rather than taking up the full width of its container like a block-level element would.
<div class="block bg-indigo-200 rounded-md p-4 mx-16 gap-2 mt-4 ">
<div class="inline-flex w-20 aspect-square items-center justify-center py-3 bg-indigo-600 text-white rounded-lg">1</div>
<div class="inline-flex w-20 aspect-square items-center justify-center py-3 bg-indigo-600 text-white rounded-lg">2</div>
<div class="inline-flex w-20 aspect-square items-center justify-center py-3 bg-indigo-600 text-white rounded-lg">3</div>
</div>Tailwind css Display table
Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities to create elements that behave like their respective table elements.
<div class="table w-full mt-4 border border-gray-300 rounded-lg ">
<div class="table-header-group bg-gray-50 rounded-lg">
<div class="table-row px-3 rounded-lg">
<div class="table-cell text-left py-3 px-2 font-semibold text-lg text-gray-900">Song</div>
<div class="table-cell text-left py-3 px-2 font-semibold text-lg text-gray-900">Artist</div>
<div class="table-cell text-left py-3 px-2 font-semibold text-lg text-gray-900">Year</div>
</div>
</div>
<div class="table-row-group">
<div class="table-row border-b border-gray-300">
<div class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
The Sliding Mr. Bones (Next Stop, Pottersville)
</div>
<div class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
Malcolm Lockyer</div>
<div class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
1961</div>
</div>
<div class="table-row border-b border-gray-300">
<div
class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
Witchy Woman</div>
<div
class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
The Eagles</div>
<div
class="table-cell border-b border-gray-300 px-2 py-3 text-base font-normal text-gray-700">
1972</div>
</div>
<div class="table-row">
<div
class="table-cell px-2 py-3 text-base font-normal text-gray-700">
Shining Star</div>
<div
class="table-cell px-2 py-3 text-base font-normal text-gray-700">
Earth, Wind, and Fire</div>
<div
class="table-cell px-2 py-3 text-base font-normal text-gray-700">
1975</div>
</div>
</div>
</div>Tailwind css Display Flow Root
The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
This paragraph will be contained within the flow-root.
<div class="flow-root border border-gray-300 my-4">
<div class="float-left w-1/2 h-20 bg-indigo-400 text-white pt-6">Floated left</div>
<div class="float-right w-1/2 h-20 bg-indigo-600 text-white pt-6">Floated Right</div>
<p class="text-base text-gray-600 pb-6 pt-3">This paragraph will be contained within the flow-root.</p>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Tailwind css Display Grid
Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system and dozens of predefined classes.
<div class="grid grid-cols-4 gap-4 w-full h-44 p-3 rounded-md border border-gray-300 my-4">
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">1</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">2</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">3</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">4</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">5</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">6</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">7</div>
<div class="bg-indigo-600 w-full h-full text-white flex items-center justify-center">8</div>
</div>Tailwind css Display inline-Grid
Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system and dozens of predefined classes.
<div class="space-x-8 mt-4">
<span class="inline-grid grid-cols-4 gap-2">
<div class="bg-indigo-600 py-2 px-6 text-white">1</div>
<div class="bg-indigo-600 py-2 px-6 text-white">2</div>
<div class="bg-indigo-600 py-2 px-6 text-white">3</div>
<div class="bg-indigo-600 py-2 px-6 text-white">4</div>
</span>
<span class="inline-grid grid-cols-4 gap-2">
<div class="bg-indigo-600 py-2 px-6 text-white">1</div>
<div class="bg-indigo-600 py-2 px-6 text-white">2</div>
<div class="bg-indigo-600 py-2 px-6 text-white">3</div>
<div class="bg-indigo-600 py-2 px-6 text-white">4</div>
</span>
</div>Tailwind css Display contents
The contents utility in a layout system allows for the creation of a "phantom" container that effectively makes its children behave as if they are direct children of the parent element
<div class="flex p-4 bg-indigo-100 gap-4 mt-4">
<div class="flex-1 w-full py-4 text-white text-center bg-indigo-600">01</div>
<div class="contents">
<div class="flex-1 w-full py-4 text-white text-center bg-indigo-600">02</div>
<div class="flex-1 w-full py-4 text-white text-center bg-indigo-600">03</div>
</div>
<div class="flex-1 w-full py-4 text-white text-center bg-indigo-600">04</div>
</div>Tailwind css Display list-item
To create a display list-item in Tailwind CSS, you can use the utilities for unordered or ordered lists. Here's a simple example of list:
<div class="list-none list-item p-4 rounded-lg border border-gray-300 w-max mx-auto mt-4">
<div class="py-1">Item 1</div>
<div class="py-1">Item 2</div>
<div class="py-1">Item 3</div>
</div>Tailwind css Display hidden
Use the hidden utility to set an element to display: none and remove it from the page layout.
<div class="flex gap-4 p-4 rounded-lg border border-gray-300 w-max mx-auto mt-4">
<div class="py-3 w-20 flex items-center justify-center text-white rounded-lg aspect-square bg-indigo-600">1</div>
<div class="py-3 w-20 hidden items-center justify-center text-white rounded-lg aspect-square bg-indigo-600">2</div>
<div class="py-3 w-20 flex items-center justify-center text-white rounded-lg aspect-square bg-indigo-600">3</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More