Utilities
Layout
Generated from the registry, so this page can't drift from the compiler.
display
Sets how an element is laid out.
Syntax
display(value)
display[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | block inline inline-block flex inline-flex grid inline-grid contents none |
Examples and generated CSS
display(grid)
display(none)
md:display(block).display\(grid\) {
display: grid;
}
.display\(none\) {
display: none;
}
@media (min-width: 768px) {
.md\:display\(block\) {
display: block;
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:display(grid)
hover:display(grid)
lg:focus:display(grid)position
Sets the positioning scheme.
Syntax
position(value)
position[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | static relative absolute fixed sticky |
Examples and generated CSS
position(relative)
position(sticky).position\(relative\) {
position: relative;
}
.position\(sticky\) {
position: sticky;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:position(relative)
hover:position(relative)
lg:focus:position(relative)overflow
Controls content that overflows its box.
Syntax
overflow(value)
overflow[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | visible hidden clip scroll auto |
Examples and generated CSS
overflow(hidden)
overflow(auto).overflow\(auto\) {
overflow: auto;
}
.overflow\(hidden\) {
overflow: hidden;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:overflow(hidden)
hover:overflow(hidden)
lg:focus:overflow(hidden)visibility
Hides an element while keeping its space.
Syntax
visibility(value)
visibility[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | visible hidden collapse |
Examples and generated CSS
visibility(hidden).visibility\(hidden\) {
visibility: hidden;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:visibility(hidden)
hover:visibility(hidden)
lg:focus:visibility(hidden)z-index
Sets the stacking order.
Syntax
z-index(value)
z-index[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto |
| integer -9999–9999 | See type |
Examples and generated CSS
z-index(10)
z-index(-1)
z-index(auto).z-index\(-1\) {
z-index: -1;
}
.z-index\(10\) {
z-index: 10;
}
.z-index\(auto\) {
z-index: auto;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:z-index(10)
hover:z-index(10)
lg:focus:z-index(10)inset
Sets all four offsets of a positioned element.
Syntax
inset(value)
inset[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full | |
| var(--name) | See type |
Examples and generated CSS
inset(0)
inset(4)
inset[10%_auto].inset\(0\) {
inset: var(--croff-spacing-0);
}
.inset\(4\) {
inset: var(--croff-spacing-4);
}
.inset\[10\%_auto\] {
inset: 10% auto;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:inset(0)
hover:inset(0)
lg:focus:inset(0)top
Sets the top offset of a positioned element.
Syntax
top(value)
top[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full | |
| var(--name) | See type |
Examples and generated CSS
top(0)
top(-2)
top(1/2)
top[3px].top\(-2\) {
top: calc(var(--croff-spacing-2) * -1);
}
.top\(0\) {
top: var(--croff-spacing-0);
}
.top\(1\/2\) {
top: 50%;
}
.top\[3px\] {
top: 3px;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:top(0)
hover:top(0)
lg:focus:top(0)right
Sets the right offset of a positioned element.
Syntax
right(value)
right[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full | |
| var(--name) | See type |
Examples and generated CSS
right(0)
right(-2)
right(1/2)
right[3px].right\(-2\) {
right: calc(var(--croff-spacing-2) * -1);
}
.right\(0\) {
right: var(--croff-spacing-0);
}
.right\(1\/2\) {
right: 50%;
}
.right\[3px\] {
right: 3px;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:right(0)
hover:right(0)
lg:focus:right(0)bottom
Sets the bottom offset of a positioned element.
Syntax
bottom(value)
bottom[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full | |
| var(--name) | See type |
Examples and generated CSS
bottom(0)
bottom(-2)
bottom(1/2)
bottom[3px].bottom\(-2\) {
bottom: calc(var(--croff-spacing-2) * -1);
}
.bottom\(0\) {
bottom: var(--croff-spacing-0);
}
.bottom\(1\/2\) {
bottom: 50%;
}
.bottom\[3px\] {
bottom: 3px;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:bottom(0)
hover:bottom(0)
lg:focus:bottom(0)left
Sets the left offset of a positioned element.
Syntax
left(value)
left[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full | |
| var(--name) | See type |
Examples and generated CSS
left(0)
left(-2)
left(1/2)
left[3px].left\(-2\) {
left: calc(var(--croff-spacing-2) * -1);
}
.left\(0\) {
left: var(--croff-spacing-0);
}
.left\(1\/2\) {
left: 50%;
}
.left\[3px\] {
left: 3px;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:left(0)
hover:left(0)
lg:focus:left(0)