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 |
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.
<!-- 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.
<!-- Example -->
<y class="inline-block">
...
</y>
Set an element as a block-level flex container.
<!-- Example -->
<y class="flex">
<y> ... </y>
<y> ... </y>
</y>
Set an element as an inline-level flex container.
<!-- 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.
<!-- 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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | Yes | |
group-hover | Yes | |
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |