Tailwind CSS - Display
Tailwind CSS Display is a utility class that helps to determine how elements are displayed in the document. This utility controls the display type of an element.
Tailwind CSS Display Classes
The list of Tailwind CSS Display Classes that provides an effective way to determine the display type of an element.
| Class | CSS Properties |
|---|---|
| block | display: block; |
| inline-block | display: inline-block; |
| inline | display: inline; |
| flex | display: flex; |
| inline-flex | display: inline-flex; |
| table | display: table; |
| inline-table | display: inline-table; |
| table-caption | display: table-caption; |
| table-cell | display: table-cell; |
| table-column | display: table-column; |
| table-column-group | display: table-column-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; |
Functionality of Tailwind CSS Display Classes
- block: It will display element as a block level element, starts on a new line, and takes up the whole width.
- inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
- inline: It will display element as a inline element. Any height and width properties will have no effect.
- flex: It displays an element as a block-level flex container.
- inline-flex: It displays an element as an inline-level flex container.
- table: It displays an element as a table.
- inline-table: The element is displayed as an inline-level table.
- table-caption: Enable element behave like a <caption> element.
- table-cell: Enable element behave like a <td> element.
- table-column: Enable element behave like a <col> element.
- table-column-group: Enable element behave like a <column>.
- table-footer-group: Enable element behave like a <tfoot> element.
- table-header-group: Enable element behave like a <thead> element.
- table-row-group: Enable element behave like a <tbody> element.
- table-row: Enable element behave like a <tr> element.
- flow-root: It create a block-level element with its own block formatting context.
- grid: It displays an element as a block-level grid container.
- inline-grid: It displays an element as an inline-level grid container.
- contents: Makes the container disappear, making the child elements children of the element the next level up in the DOM.
- list-item: Enable element behave like a <li> element.
- hidden: It makes an element invisible and remove it from the document flow.
Tailwind CSS Display Classes Examples
Below example will illustrate the Tailwind CSS display classes.
Example 1
The following example is demonstrating the use of Inline, Block, Inline-Block classes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h1 class="text-3xl">
Tailwind CSS Display- Inline, Block, Inline-Block
</h1>
<h2 class="text-2xl
my-2
text-lime-600">
Display - Inline
</h2>
<li class="inline
border-2
rounded p-1
border-blue-700">
Item1
</li>
<li class="inline
border-2
rounded p-1
border-rose-700">
Item2
</li>
<li class="inline
border-2
rounded p-1
border-fuchsia-700">
Item3
</li>
<h2 class="text-2xl
my-2
text-yellow-600">
Display - Block
</h2>
<li class="block
border-2
rounded p-1
border-blue-700">
Item1
</li>
<li class="block
border-2
rounded p-1
border-rose-700">
Item2
</li>
<li class="block
border-2
rounded p-1
border-fuchsia-700">
Item3
</li>
<h2 class="text-2xl
my-2
text-violet-600">
Display - Inline-block
</h2>
<li class="inline-block
border-2
h-12 w-32
rounded p-1
border-blue-700">
Inline-Block 1
</li>
<li class="inline-block
border-2
h-12 w-32
rounded p-1
border-rose-700">
Inline-Block 2
</li>
<li class="inline-block
h-12 w-32
border-2
rounded p-1
border-fuchsia-700">
Inline-Block 3
</li>
</body>
</html>
Example 2
The following example is demonstrating the use of Flex & Inline-Flex classes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h1 class="text-3xl">
Tailwind CSS Display- Flex, Inline-Flex
</h1>
<h2 class="text-2xl
my-2
text-lime-600">
display: flex
</h2>
<div class="flex
border-2
rounded p-1
border-blue-700
mb-1">
Flex-Block 1
</div>
<div class="flex
border-2
rounded p-1
border-rose-700
mb-1">
Flex-Block 2
</div>
<div class="flex
border-2
rounded p-1
border-fuchsia-700">
Flex-Block 3
</div>
<h2 class="text-2xl
my-2
text-violet-600">
display: inline-flex
</h2>
<div class="inline-flex
border-2
rounded p-1
border-blue-700">
Inline Flex-Block 1
</div>
<div class="inline-flex
border-2
rounded p-1
border-rose-700">
Inline Flex-Block 2
</div>
<div class="inline-flex
border-2
rounded p-1
border-fuchsia-700">
Inline Flex-Block 3
</div>
</body>
</html>
Example 3
The following example is demonstrating the use of table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row classes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-3xl
text-center
mb-2">
Tailwind CSS Display Classes Example
</h2>
<div class="table
w-full
border">
<div class="table-caption
text-center
text-xl
font-bold
text-orange-400">
Sample Table
</div>
<div class="table-header-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Header 1
</div>
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Header 2
</div>
</div>
</div>
<div class="table-row-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border">
Row1-Cell1
</div>
<div class="table-cell
text-center
p-2
border">
Row1-cell2
</div>
</div>
<div class="table-row">
<div class="table-cell
text-center
p-2
border">
Row2-Cell1
</div>
<div class="table-cell
text-center
p-2
border">
Row2-Cell1
</div>
</div>
</div>
<div class="table-footer-group">
<div class="table-row">
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Footer 1
</div>
<div class="table-cell
text-center
p-2
border
bg-slate-100">
Footer 2
</div>
</div>
</div>
</div>
</body>
</html>
Example 4
The following example is demonstrating the use of Grid & Inline-Grid classes.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-3xl
mb-2">
Tailwind CSS Display Grid Example
</h2>
<div class="grid
bg-orange-200
p-2 mb-2
rounded
text-center">
grid-Block 1
</div>
<div class="grid
bg-amber-200
p-2 mb-2
rounded
text-center">
grid-Block 2
</div>
<div class="grid
bg-lime-200
p-2 mb-2
rounded
text-center">
grid-Block 3
</div>
<h2 class="text-3xl
mb-2">
Tailwind CSS Display Inline-Grid Example
</h2>
<div class="inline-grid
bg-orange-200
p-2 mb-2
rounded
text-center">
grid-Block 1
</div>
<div class="inline-grid
bg-amber-200
p-2 mb-2
rounded
text-center">
grid-Block 2
</div>
<div class="inline-grid
bg-lime-200
p-2 mb-2
rounded
text-center">
grid-Block 3
</div>
</body>
</html>
Example 5
The following example is demonstrating the use of Content, List-Item & Hidden classes.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-3xl
mb-2">
Tailwind CSS Content Class Example
</h2>
<div class="contents">
<div class="bg-blue-200 p-4">
<p>This is part of a contents element.</p>
</div>
<div class="bg-green-200 p-4">
<p>This is also part of a contents element.</p>
</div>
</div>
<h2 class="text-3xl
my-2">
Tailwind CSS List-Item Class Example
</h2>
<div class="list-item">
Item 1
</div>
<div class="list-item">
Item 2
</div>
<div class="list-item">
Item 3
</div>
<h2 class="text-3xl
mt-2">
Tailwind CSS hidden Class Example
</h2>
<div class="hidden">
<p>This content is hidden and will not be displayed.</p>
</div>
</body>
</html>
Advertisements