Layouts

Display

Utilities for sets the display box type of an element.

Class

class	css
block	display: block
hidden	display: none
inline	display: inline
inline-block	display: inline-block
flex	display: flex
inline-flex	display: inline-flex

class	css
table	display: table
table-caption v1.0.8	display: table-caption
table-cell	display: table-cell
table-row	display: table-row
table-row-(group) v1.0.8	display: table-row-(group)
table-column v1.0.8	display: table-column
table-column-(group) v1.0.8	display: table-column-(group)
table-header-(group) v1.0.8	display: table-header-(group)
table-footer-(group) v1.0.8	display: 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.

<!-- 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.