Utilities
Sizing
Generated from the registry, so this page can't drift from the compiler.
width
Sets the width.
Syntax
syntax
width(value)
width[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 min max fit screen | |
| var(--name) | See type |
Examples and generated CSS
expressions
width(full)
width(64)
md:width(1/2)
width[320px]Generated CSS
.width\(64\) {
width: var(--croff-spacing-64);
}
.width\(full\) {
width: 100%;
}
.width\[320px\] {
width: 320px;
}
@media (min-width: 768px) {
.md\:width\(1\/2\) {
width: 50%;
}
}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
expressions
md:width(full)
hover:width(full)
lg:focus:width(full)height
Sets the height.
Syntax
syntax
height(value)
height[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 min max fit screen | |
| var(--name) | See type |
Examples and generated CSS
expressions
height(full)
height(64)
md:height(1/2)
height[320px]Generated CSS
.height\(64\) {
height: var(--croff-spacing-64);
}
.height\(full\) {
height: 100%;
}
.height\[320px\] {
height: 320px;
}
@media (min-width: 768px) {
.md\:height\(1\/2\) {
height: 50%;
}
}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
expressions
md:height(full)
hover:height(full)
lg:focus:height(full)min-width
Sets the min width.
Syntax
syntax
min-width(value)
min-width[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 min max fit screen | |
| var(--name) | See type |
Examples and generated CSS
expressions
min-width(full)
min-width(64)
md:min-width(1/2)
min-width[320px]Generated CSS
.min-width\(64\) {
min-width: var(--croff-spacing-64);
}
.min-width\(full\) {
min-width: 100%;
}
.min-width\[320px\] {
min-width: 320px;
}
@media (min-width: 768px) {
.md\:min-width\(1\/2\) {
min-width: 50%;
}
}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
expressions
md:min-width(full)
hover:min-width(full)
lg:focus:min-width(full)max-width
Sets the max width.
Syntax
syntax
max-width(value)
max-width[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 min max fit screen none | |
| var(--name) | See type |
Examples and generated CSS
expressions
max-width(full)
max-width(64)
md:max-width(1/2)
max-width[320px]Generated CSS
.max-width\(64\) {
max-width: var(--croff-spacing-64);
}
.max-width\(full\) {
max-width: 100%;
}
.max-width\[320px\] {
max-width: 320px;
}
@media (min-width: 768px) {
.md\:max-width\(1\/2\) {
max-width: 50%;
}
}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
expressions
md:max-width(full)
hover:max-width(full)
lg:focus:max-width(full)min-height
Sets the min height.
Syntax
syntax
min-height(value)
min-height[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 min max fit screen | |
| var(--name) | See type |
Examples and generated CSS
expressions
min-height(full)
min-height(64)
md:min-height(1/2)
min-height[320px]Generated CSS
.min-height\(64\) {
min-height: var(--croff-spacing-64);
}
.min-height\(full\) {
min-height: 100%;
}
.min-height\[320px\] {
min-height: 320px;
}
@media (min-width: 768px) {
.md\:min-height\(1\/2\) {
min-height: 50%;
}
}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
expressions
md:min-height(full)
hover:min-height(full)
lg:focus:min-height(full)max-height
Sets the max height.
Syntax
syntax
max-height(value)
max-height[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 min max fit screen none | |
| var(--name) | See type |
Examples and generated CSS
expressions
max-height(full)
max-height(64)
md:max-height(1/2)
max-height[320px]Generated CSS
.max-height\(64\) {
max-height: var(--croff-spacing-64);
}
.max-height\(full\) {
max-height: 100%;
}
.max-height\[320px\] {
max-height: 320px;
}
@media (min-width: 768px) {
.md\:max-height\(1\/2\) {
max-height: 50%;
}
}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
expressions
md:max-height(full)
hover:max-height(full)
lg:focus:max-height(full)aspect-ratio
Sets the preferred width-to-height ratio.
Syntax
syntax
aspect-ratio(value)
aspect-ratio[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto square video |
| ratio, e.g. 16/9 | See type |
Examples and generated CSS
expressions
aspect-ratio(square)
aspect-ratio(16/9)
aspect-ratio[1.618]Generated CSS
.aspect-ratio\(16\/9\) {
aspect-ratio: 16 / 9;
}
.aspect-ratio\(square\) {
aspect-ratio: 1 / 1;
}
.aspect-ratio\[1\.618\] {
aspect-ratio: 1.618;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
expressions
md:aspect-ratio(square)
hover:aspect-ratio(square)
lg:focus:aspect-ratio(square)