Display
Utilities for controlling the display box type of an element.
Default class reference
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 | 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; |
hidden | display: none; |
Block
Use block
to create a block-level element.
<div class="space-y-4 ...">
<span class="block ...">1</span>
<span class="block ...">2</span>
<span class="block ...">3</span>
</div>
Flow-Root
Use flow-root
to create a block-level element with its own block formatting context.
<div class="space-y-4">
<div class="flow-root ...">
<div class="my-4 ...">1</div>
</div>
<div class="flow-root ...">
<div class="my-4 ...">2</div>
</div>
</div>
Inline Block
Use inline-block
to create an inline block-level element.
<div class="space-x-4 ...">
<div class="inline-block ...">1</div>
<div class="inline-block ...">2</div>
<div class="inline-block ...">3</div>
</div>
Inline
Use inline
to create an inline element.
<div>
<div class="inline ...">1</div>
<div class="inline ...">2</div>
<div class="inline ...">3</div>
</div>
Flex
Use flex
to create a block-level flex container.
<div class="flex space-x-4 ...">
<div class="flex-1 ...">1</div>
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
Inline flex
Use inline-flex
to create an inline flex container.
<div class="inline-flex space-x-4 ...">
<div class="flex-1 ...">1</div>
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
Grid
Use grid
to create a grid container.
<div class="grid gap-4 grid-cols-3">
<!-- ... -->
</div>
Inline Grid
Use inline-grid
to create an inline grid container.
<span class="inline-grid grid-cols-3 gap-x-4">
<span>1</span>
<span>1</span>
<span>1</span>
</span>
<span class="inline-grid grid-cols-3 gap-x-4">
<span>2</span>
<span>2</span>
<span>2</span>
</span>
Contents
Use contents
to create a “phantom” container whose children act like direct children of the parent..
<div class="flex ...">
<div class="flex-1 ...">1</div>
<div class="contents">
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
<div class="flex-1 ...">4</div>
</div>
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 ...">
<div class="table-row-group">
<div class="table-row">
<div class="table-cell ...">A cell with more content</div>
<div class="table-cell ...">Cell 2</div>
<div class="table-cell ...">Cell 3</div>
</div>
<div class="table-row">
<div class="table-cell ...">Cell 4</div>
<div class="table-cell ...">A cell with more content</div>
<div class="table-cell ...">Cell 6</div>
</div>
</div>
</div>
Hidden
Use hidden
to set an element to display: none
and remove it from the page layout (compare with .invisible
from the visibility documentation).
<div class="flex ...">
<div class="hidden ...">1</div>
<div>2</div>
<div>3</div>
</div>
Responsive
To control the display property of an element at a specific breakpoint, add a {screen}:
prefix to any existing display utility class. For example, use md:inline-flex
to apply the inline-flex
utility at only medium screen sizes and above.
<div class="flex md:inline-flex ...">
<!-- ... -->
</div>
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Customizing
Variants
By default, only responsive variants are generated for display utilities.
You can control which variants are generated for the display utilities by modifying the display
property in the variants
section of your tailwind.config.js
file.
For example, this config will also generate hover and focus variants:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ display: ['hover', 'focus'],
}
}
}
Disabling
If you don’t plan to use the display utilities in your project, you can disable them entirely by setting the display
property to false
in the corePlugins
section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ display: false,
}
}