Utilities for controlling the display box type of an element.
<div class="space-y-4 ...">
<span class="block ...">1</span>
<span class="block ...">2</span>
<span class="block ...">3</span>
</div>
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>
<div class="space-x-4 ...">
<div class="inline-block ...">1</div>
<div class="inline-block ...">2</div>
<div class="inline-block ...">3</div>
</div>
<div>
<div class="inline ...">1</div>
<div class="inline ...">2</div>
<div class="inline ...">3</div>
</div>
<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>
<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>
<div class="grid gap-4 grid-cols-3">
<!-- ... -->
</div>
<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>
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>
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>
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>
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.
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'],
}
}
}
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,
}
}