| 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-row | display: table-row; |
.table-cell | display: table-cell; |
.hidden | display: none; |
Usage
Use .block to create a block-level element.
<div class="bg-gray-200 p-4">
<span class="block text-gray-700 text-center bg-gray-400 px-4 py-2">1</span>
<span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">2</span>
<span class="block text-gray-700 text-center bg-gray-400 px-4 py-2 mt-2">3</span>
</div>Use .inline-block to create an inline block-level element.
<div class="bg-gray-200">
<div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Use .inline to create an inline element.
<div class="bg-gray-200">
<div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
<div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
<div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>Use .flex to create a block-level flex container.
<div class="flex bg-gray-200">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Use .inline-flex to create an inline flex container.
<div class="inline-flex bg-gray-200">
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Tables
Use the .table, .table-row, and .table-cell to create elements that behave like a <table>, <tr>, or <td> element, respectively.
<div class="table w-full">
<div class="table-row-group">
<div class="table-row">
<div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
<div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 2</div>
<div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">Cell 3</div>
</div>
<div class="table-row">
<div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">Cell 4</div>
<div class="table-cell bg-gray-400 text-gray-700 px-4 py-2 text-sm">A cell with more content</div>
<div class="table-cell bg-gray-200 text-gray-700 px-4 py-2 text-sm">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).
<div class="flex bg-gray-200">
<div class="hidden text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
<div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>Variants
By default, only responsive variants are generated for display utilities.
Responsive
To control the display behavior of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility.
For example, use .md:block to apply the block utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:block, add "display" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"display",
);