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.
默認情況下, 只有 響應式 的 display 變化模式 (variants) 會產生。
在 tailwind.config.js 的 variants 區塊中變更 display 屬性來決定有哪些變化模式會生成。
舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ display: ['responsive', 'hover'],
}
}
}如果你不打算在專案中使用 display 功能，可以在你的設定檔裡的 corePlugins 屬性中將 display 設定為 false 來停用功能：
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ display: false,
}
}