Press/to search

Layouts

Display

Utilities for sets the display box type of an element.


Class

classcss
blockdisplay: block
hiddendisplay: none
inlinedisplay: inline
inline-blockdisplay: inline-block
flexdisplay: flex
inline-flexdisplay: inline-flex
tabledisplay: table
table-caption v1.0.8display: table-caption
table-celldisplay: table-cell
table-rowdisplay: table-row
table-row-(group) v1.0.8display: table-row-(group)
table-column v1.0.8display: table-column
table-column-(group) v1.0.8display: table-column-(group)
table-header-(group) v1.0.8display: table-header-(group)
table-footer-(group) v1.0.8display: table-footer-(group)

Usage

Set a block element that starts on a new line and takes up the full width.

1 2 3
<!-- Example -->
<span class="block">
...
</span>

Set the completely removed element.

13
<!-- Example -->
<y class="block">
...
</y>
<y class="hidden">
...
</y>
<y class="block">
...
</y>

Set an element as an inline. Any height and width properties will have no effect.

123
<!-- Example -->
<y class="inline-block">
...
</y>

Set an element as a block-level flex container.

123
<!-- Example -->
<y class="flex">
<y> ... </y>
<y> ... </y>
</y>

Set an element as an inline-level flex container.

123
<!-- Example -->
<y class="inline-flex">
<y> ... </y>
<y> ... </y>
</y>

Set a complete set of table with table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities.

Row-1 Cell-1Row-1 Cell-2Row-2 Cell-1Row-2 Cell-2
<!-- Example -->
<y class="table w-full">
<y class="table-row-group">
<y class="table-row">
<y class="table-cell">
...
</y>
<y class="table-cell">
...
</y>
</y>
<y class="table-row">
<y class="table-cell">
...
</y>
<y class="table-cell">
...
</y>
</y>
</y>
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.