Utilities
Layout
Display, position, inset, z-index, overflow, floats, object fit, aspect ratio, columns and container setup.
388classes
434variant classes
31properties
Live example
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="relative aspect-video overflow-hidden rounded-xl bg-gradient-to-br from-primary to-accent">
<span class="absolute top-3 left-3 rounded-full bg-background px-2.5 py-1 text-xs font-semibold">absolute top-3 left-3</span>
<span class="absolute bottom-3 right-3 z-10 rounded-md bg-foreground text-background px-2 py-1 text-xs">z-10</span>
</div>
<div class="@container rounded-xl border bg-surface p-4">
<div class="flex flex-col @md:flex-row gap-3">
<div class="h-16 @md:w-1/3 rounded-lg bg-primary"></div>
<p class="text-sm text-muted-foreground">An @container parent. Children switch to a row once the container is 28rem wide.</p>
</div>
</div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example md:block. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | not generated | 0 |
| Group and peer | group-hover:peer-checked: | 16 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | sm:md:lg:xl:2xl: | 19 |
| Containers | @xs:@sm:@md:@lg:@xl: | 7 |
| Media and direction | print:screen:rtl:ltr:forced-colors: | 112 |
Width 1
Variants: none
| Class | CSS |
|---|---|
container | width: 100%; margin-inline: auto; padding-inline: 1rem; |
Container 2
Variants: none
| Class | CSS |
|---|---|
container-q | container-type: inline-size; |
@container | container-type: inline-size; |
Display 14
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
block | display: block; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
inline-block | display: inline-block; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
inline | display: inline; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
flex | display: flex; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
inline-flex | display: inline-flex; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
grid | display: grid; | group-hover peer-checked sm md lg xl 2xl @xs @sm @md @lg @xl print screen forced-colors |
inline-grid | display: inline-grid; | group-hover peer-checked sm md lg xl 2xl print screen |
contents | display: contents; | group-hover peer-checked sm md lg xl 2xl print screen forced-colors |
flow-root | display: flow-root; | group-hover peer-checked sm md lg xl 2xl print screen |
table | display: table; | group-hover peer-checked sm md lg xl 2xl print screen |
table-row | display: table-row; | group-hover peer-checked sm md lg xl 2xl print screen |
table-cell | display: table-cell; | group-hover peer-checked sm md lg xl 2xl print screen |
list-item | display: list-item; | group-hover peer-checked sm md lg xl 2xl print screen |
Position 5
Variants: sm:md:lg:xl:2xl:print:screen:
| Class | CSS |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
Inset 36
Variants: none
| Class | CSS |
|---|---|
inset-0 | inset: 0; |
inset-1 | inset: 0.25rem; |
inset-2 | inset: 0.5rem; |
inset-3 | inset: 0.75rem; |
inset-4 | inset: 1rem; |
inset-5 | inset: 1.25rem; |
inset-6 | inset: 1.5rem; |
inset-8 | inset: 2rem; |
inset-10 | inset: 2.5rem; |
inset-12 | inset: 3rem; |
inset-16 | inset: 4rem; |
inset-20 | inset: 5rem; |
inset-24 | inset: 6rem; |
inset-px | inset: 1px; |
inset-0.5 | inset: 0.125rem; |
inset-1.5 | inset: 0.375rem; |
inset-2.5 | inset: 0.625rem; |
inset-auto | inset: auto; |
inset-full | inset: 100%; |
inset-1/2 | inset: 50%; |
inset-1/3 | inset: 33.333333%; |
inset-2/3 | inset: 66.666667%; |
inset-1/4 | inset: 25%; |
inset-3/4 | inset: 75%; |
-inset-1 | inset: -0.25rem; |
-inset-2 | inset: -0.5rem; |
-inset-3 | inset: -0.75rem; |
-inset-4 | inset: -1rem; |
-inset-6 | inset: -1.5rem; |
-inset-8 | inset: -2rem; |
-inset-12 | inset: -3rem; |
-inset-16 | inset: -4rem; |
-inset-px | inset: -1px; |
-inset-0.5 | inset: -0.125rem; |
-inset-full | inset: -100%; |
-inset-1/2 | inset: -50%; |
Left 72
Variants: rtl:ltr:
| Class | CSS |
|---|---|
inset-x-0 | left: 0; right: 0; |
inset-x-1 | left: 0.25rem; right: 0.25rem; |
inset-x-2 | left: 0.5rem; right: 0.5rem; |
inset-x-3 | left: 0.75rem; right: 0.75rem; |
inset-x-4 | left: 1rem; right: 1rem; |
inset-x-5 | left: 1.25rem; right: 1.25rem; |
inset-x-6 | left: 1.5rem; right: 1.5rem; |
inset-x-8 | left: 2rem; right: 2rem; |
inset-x-10 | left: 2.5rem; right: 2.5rem; |
inset-x-12 | left: 3rem; right: 3rem; |
inset-x-16 | left: 4rem; right: 4rem; |
inset-x-20 | left: 5rem; right: 5rem; |
inset-x-24 | left: 6rem; right: 6rem; |
inset-x-px | left: 1px; right: 1px; |
inset-x-0.5 | left: 0.125rem; right: 0.125rem; |
inset-x-1.5 | left: 0.375rem; right: 0.375rem; |
inset-x-2.5 | left: 0.625rem; right: 0.625rem; |
inset-x-auto | left: auto; right: auto; |
inset-x-full | left: 100%; right: 100%; |
inset-x-1/2 | left: 50%; right: 50%; |
inset-x-1/3 | left: 33.333333%; right: 33.333333%; |
inset-x-2/3 | left: 66.666667%; right: 66.666667%; |
inset-x-1/4 | left: 25%; right: 25%; |
inset-x-3/4 | left: 75%; right: 75%; |
-inset-x-1 | left: -0.25rem; right: -0.25rem; |
-inset-x-2 | left: -0.5rem; right: -0.5rem; |
-inset-x-3 | left: -0.75rem; right: -0.75rem; |
-inset-x-4 | left: -1rem; right: -1rem; |
-inset-x-6 | left: -1.5rem; right: -1.5rem; |
-inset-x-8 | left: -2rem; right: -2rem; |
-inset-x-12 | left: -3rem; right: -3rem; |
-inset-x-16 | left: -4rem; right: -4rem; |
-inset-x-px | left: -1px; right: -1px; |
-inset-x-0.5 | left: -0.125rem; right: -0.125rem; |
-inset-x-full | left: -100%; right: -100%; |
-inset-x-1/2 | left: -50%; right: -50%; |
left-0 | left: 0; |
left-1 | left: 0.25rem; |
left-2 | left: 0.5rem; |
left-3 | left: 0.75rem; |
left-4 | left: 1rem; |
left-5 | left: 1.25rem; |
left-6 | left: 1.5rem; |
left-8 | left: 2rem; |
left-10 | left: 2.5rem; |
left-12 | left: 3rem; |
left-16 | left: 4rem; |
left-20 | left: 5rem; |
left-24 | left: 6rem; |
left-px | left: 1px; |
left-0.5 | left: 0.125rem; |
left-1.5 | left: 0.375rem; |
left-2.5 | left: 0.625rem; |
left-auto | left: auto; |
left-full | left: 100%; |
left-1/2 | left: 50%; |
left-1/3 | left: 33.333333%; |
left-2/3 | left: 66.666667%; |
left-1/4 | left: 25%; |
left-3/4 | left: 75%; |
-left-1 | left: -0.25rem; |
-left-2 | left: -0.5rem; |
-left-3 | left: -0.75rem; |
-left-4 | left: -1rem; |
-left-6 | left: -1.5rem; |
-left-8 | left: -2rem; |
-left-12 | left: -3rem; |
-left-16 | left: -4rem; |
-left-px | left: -1px; |
-left-0.5 | left: -0.125rem; |
-left-full | left: -100%; |
-left-1/2 | left: -50%; |
Top 72
Variants: none
| Class | CSS |
|---|---|
inset-y-0 | top: 0; bottom: 0; |
inset-y-1 | top: 0.25rem; bottom: 0.25rem; |
inset-y-2 | top: 0.5rem; bottom: 0.5rem; |
inset-y-3 | top: 0.75rem; bottom: 0.75rem; |
inset-y-4 | top: 1rem; bottom: 1rem; |
inset-y-5 | top: 1.25rem; bottom: 1.25rem; |
inset-y-6 | top: 1.5rem; bottom: 1.5rem; |
inset-y-8 | top: 2rem; bottom: 2rem; |
inset-y-10 | top: 2.5rem; bottom: 2.5rem; |
inset-y-12 | top: 3rem; bottom: 3rem; |
inset-y-16 | top: 4rem; bottom: 4rem; |
inset-y-20 | top: 5rem; bottom: 5rem; |
inset-y-24 | top: 6rem; bottom: 6rem; |
inset-y-px | top: 1px; bottom: 1px; |
inset-y-0.5 | top: 0.125rem; bottom: 0.125rem; |
inset-y-1.5 | top: 0.375rem; bottom: 0.375rem; |
inset-y-2.5 | top: 0.625rem; bottom: 0.625rem; |
inset-y-auto | top: auto; bottom: auto; |
inset-y-full | top: 100%; bottom: 100%; |
inset-y-1/2 | top: 50%; bottom: 50%; |
inset-y-1/3 | top: 33.333333%; bottom: 33.333333%; |
inset-y-2/3 | top: 66.666667%; bottom: 66.666667%; |
inset-y-1/4 | top: 25%; bottom: 25%; |
inset-y-3/4 | top: 75%; bottom: 75%; |
-inset-y-1 | top: -0.25rem; bottom: -0.25rem; |
-inset-y-2 | top: -0.5rem; bottom: -0.5rem; |
-inset-y-3 | top: -0.75rem; bottom: -0.75rem; |
-inset-y-4 | top: -1rem; bottom: -1rem; |
-inset-y-6 | top: -1.5rem; bottom: -1.5rem; |
-inset-y-8 | top: -2rem; bottom: -2rem; |
-inset-y-12 | top: -3rem; bottom: -3rem; |
-inset-y-16 | top: -4rem; bottom: -4rem; |
-inset-y-px | top: -1px; bottom: -1px; |
-inset-y-0.5 | top: -0.125rem; bottom: -0.125rem; |
-inset-y-full | top: -100%; bottom: -100%; |
-inset-y-1/2 | top: -50%; bottom: -50%; |
top-0 | top: 0; |
top-1 | top: 0.25rem; |
top-2 | top: 0.5rem; |
top-3 | top: 0.75rem; |
top-4 | top: 1rem; |
top-5 | top: 1.25rem; |
top-6 | top: 1.5rem; |
top-8 | top: 2rem; |
top-10 | top: 2.5rem; |
top-12 | top: 3rem; |
top-16 | top: 4rem; |
top-20 | top: 5rem; |
top-24 | top: 6rem; |
top-px | top: 1px; |
top-0.5 | top: 0.125rem; |
top-1.5 | top: 0.375rem; |
top-2.5 | top: 0.625rem; |
top-auto | top: auto; |
top-full | top: 100%; |
top-1/2 | top: 50%; |
top-1/3 | top: 33.333333%; |
top-2/3 | top: 66.666667%; |
top-1/4 | top: 25%; |
top-3/4 | top: 75%; |
-top-1 | top: -0.25rem; |
-top-2 | top: -0.5rem; |
-top-3 | top: -0.75rem; |
-top-4 | top: -1rem; |
-top-6 | top: -1.5rem; |
-top-8 | top: -2rem; |
-top-12 | top: -3rem; |
-top-16 | top: -4rem; |
-top-px | top: -1px; |
-top-0.5 | top: -0.125rem; |
-top-full | top: -100%; |
-top-1/2 | top: -50%; |
Right 36
Variants: rtl:ltr:
| Class | CSS |
|---|---|
right-0 | right: 0; |
right-1 | right: 0.25rem; |
right-2 | right: 0.5rem; |
right-3 | right: 0.75rem; |
right-4 | right: 1rem; |
right-5 | right: 1.25rem; |
right-6 | right: 1.5rem; |
right-8 | right: 2rem; |
right-10 | right: 2.5rem; |
right-12 | right: 3rem; |
right-16 | right: 4rem; |
right-20 | right: 5rem; |
right-24 | right: 6rem; |
right-px | right: 1px; |
right-0.5 | right: 0.125rem; |
right-1.5 | right: 0.375rem; |
right-2.5 | right: 0.625rem; |
right-auto | right: auto; |
right-full | right: 100%; |
right-1/2 | right: 50%; |
right-1/3 | right: 33.333333%; |
right-2/3 | right: 66.666667%; |
right-1/4 | right: 25%; |
right-3/4 | right: 75%; |
-right-1 | right: -0.25rem; |
-right-2 | right: -0.5rem; |
-right-3 | right: -0.75rem; |
-right-4 | right: -1rem; |
-right-6 | right: -1.5rem; |
-right-8 | right: -2rem; |
-right-12 | right: -3rem; |
-right-16 | right: -4rem; |
-right-px | right: -1px; |
-right-0.5 | right: -0.125rem; |
-right-full | right: -100%; |
-right-1/2 | right: -50%; |
Bottom 36
Variants: none
| Class | CSS |
|---|---|
bottom-0 | bottom: 0; |
bottom-1 | bottom: 0.25rem; |
bottom-2 | bottom: 0.5rem; |
bottom-3 | bottom: 0.75rem; |
bottom-4 | bottom: 1rem; |
bottom-5 | bottom: 1.25rem; |
bottom-6 | bottom: 1.5rem; |
bottom-8 | bottom: 2rem; |
bottom-10 | bottom: 2.5rem; |
bottom-12 | bottom: 3rem; |
bottom-16 | bottom: 4rem; |
bottom-20 | bottom: 5rem; |
bottom-24 | bottom: 6rem; |
bottom-px | bottom: 1px; |
bottom-0.5 | bottom: 0.125rem; |
bottom-1.5 | bottom: 0.375rem; |
bottom-2.5 | bottom: 0.625rem; |
bottom-auto | bottom: auto; |
bottom-full | bottom: 100%; |
bottom-1/2 | bottom: 50%; |
bottom-1/3 | bottom: 33.333333%; |
bottom-2/3 | bottom: 66.666667%; |
bottom-1/4 | bottom: 25%; |
bottom-3/4 | bottom: 75%; |
-bottom-1 | bottom: -0.25rem; |
-bottom-2 | bottom: -0.5rem; |
-bottom-3 | bottom: -0.75rem; |
-bottom-4 | bottom: -1rem; |
-bottom-6 | bottom: -1.5rem; |
-bottom-8 | bottom: -2rem; |
-bottom-12 | bottom: -3rem; |
-bottom-16 | bottom: -4rem; |
-bottom-px | bottom: -1px; |
-bottom-0.5 | bottom: -0.125rem; |
-bottom-full | bottom: -100%; |
-bottom-1/2 | bottom: -50%; |
Z index 8
Variants: none
| Class | CSS |
|---|---|
z-0 | z-index: 0; |
z-10 | z-index: 10; |
z-20 | z-index: 20; |
z-30 | z-index: 30; |
z-40 | z-index: 40; |
z-50 | z-index: 50; |
z-auto | z-index: auto; |
-z-10 | z-index: -10; |
Overflow 5
Variants: none
| Class | CSS |
|---|---|
overflow-auto | overflow: auto; |
overflow-clip | overflow: clip; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
Overflow x 5
Variants: none
| Class | CSS |
|---|---|
overflow-x-auto | overflow-x: auto; |
overflow-x-clip | overflow-x: clip; |
overflow-x-visible | overflow-x: visible; |
overflow-x-scroll | overflow-x: scroll; |
Overflow y 5
Variants: none
| Class | CSS |
|---|---|
overflow-y-auto | overflow-y: auto; |
overflow-y-clip | overflow-y: clip; |
overflow-y-visible | overflow-y: visible; |
overflow-y-scroll | overflow-y: scroll; |
Overscroll behavior 3
Variants: none
| Class | CSS |
|---|---|
overscroll-auto | overscroll-behavior: auto; |
overscroll-contain | overscroll-behavior: contain; |
overscroll-none | overscroll-behavior: none; |
Overscroll behavior x 3
Variants: none
| Class | CSS |
|---|---|
overscroll-x-auto | overscroll-behavior-x: auto; |
overscroll-x-contain | overscroll-behavior-x: contain; |
overscroll-x-none | overscroll-behavior-x: none; |
Overscroll behavior y 3
Variants: none
| Class | CSS |
|---|---|
overscroll-y-auto | overscroll-behavior-y: auto; |
overscroll-y-contain | overscroll-behavior-y: contain; |
overscroll-y-none | overscroll-behavior-y: none; |
Visibility 3
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
visible | visibility: visible; | group-hover peer-checked forced-colors |
invisible | visibility: hidden; | group-hover peer-checked forced-colors |
collapse | visibility: collapse; |
Box sizing 2
Variants: none
| Class | CSS |
|---|---|
box-border | box-sizing: border-box; |
box-content | box-sizing: content-box; |
Float 5
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
float-left | float: left; | rtl ltr |
float-right | float: right; | rtl ltr |
float-none | float: none; | |
float-start | float: inline-start; | |
float-end | float: inline-end; |
Clear 4
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
clear-left | clear: left; | rtl ltr |
clear-right | clear: right; | rtl ltr |
clear-both | clear: both; | |
clear-none | clear: none; |
Isolation 2
Variants: none
| Class | CSS |
|---|---|
isolate | isolation: isolate; |
isolation-auto | isolation: auto; |
Object fit 5
Variants: none
| Class | CSS |
|---|---|
object-contain | object-fit: contain; |
object-cover | object-fit: cover; |
object-fill | object-fit: fill; |
object-none | object-fit: none; |
object-scale-down | object-fit: scale-down; |
Object position 9
Variants: none
| Class | CSS |
|---|---|
object-bottom | object-position: bottom; |
object-center | object-position: center; |
object-left | object-position: left; |
object-left-bottom | object-position: left bottom; |
object-left-top | object-position: left top; |
object-right | object-position: right; |
object-right-bottom | object-position: right bottom; |
object-right-top | object-position: right top; |
object-top | object-position: top; |
Aspect ratio 10
Variants: none
| Class | CSS |
|---|---|
aspect-auto | aspect-ratio: auto; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: 16 / 9; |
aspect-4/3 | aspect-ratio: 4 / 3; |
aspect-3/2 | aspect-ratio: 3 / 2; |
aspect-16/9 | aspect-ratio: 16 / 9; |
aspect-21/9 | aspect-ratio: 21 / 9; |
aspect-3/4 | aspect-ratio: 3 / 4; |
aspect-2/3 | aspect-ratio: 2 / 3; |
aspect-9/16 | aspect-ratio: 9 / 16; |
Columns 22
Variants: none
| Class | CSS |
|---|---|
columns-1 | columns: 1; |
columns-2 | columns: 2; |
columns-3 | columns: 3; |
columns-4 | columns: 4; |
columns-5 | columns: 5; |
columns-6 | columns: 6; |
columns-7 | columns: 7; |
columns-8 | columns: 8; |
columns-9 | columns: 9; |
columns-10 | columns: 10; |
columns-11 | columns: 11; |
columns-12 | columns: 12; |
columns-auto | columns: auto; |
columns-3xs | columns: 16rem; |
columns-2xs | columns: 18rem; |
columns-xs | columns: 20rem; |
columns-sm | columns: 24rem; |
columns-md | columns: 28rem; |
columns-lg | columns: 32rem; |
columns-xl | columns: 36rem; |
columns-2xl | columns: 42rem; |
columns-3xl | columns: 48rem; |
Break inside 4
Variants: none
| Class | CSS |
|---|---|
break-inside-auto | break-inside: auto; |
break-inside-avoid | break-inside: avoid; |
break-inside-avoid-page | break-inside: avoid-page; |
break-inside-avoid-column | break-inside: avoid-column; |
Break before 5
Variants: none
| Class | CSS |
|---|---|
break-before-auto | break-before: auto; |
break-before-avoid | break-before: avoid; |
break-before-all | break-before: all; |
break-before-page | break-before: page; |
break-before-column | break-before: column; |
Break after 5
Variants: none
| Class | CSS |
|---|---|
break-after-auto | break-after: auto; |
break-after-avoid | break-after: avoid; |
break-after-all | break-after: all; |
break-after-page | break-after: page; |
break-after-column | break-after: column; |
Box decoration break 2
Variants: none
| Class | CSS |
|---|---|
box-decoration-clone | -webkit-box-decoration-break: clone; box-decoration-break: clone; |
box-decoration-slice | -webkit-box-decoration-break: slice; box-decoration-break: slice; |
Border collapse 2
Variants: none
| Class | CSS |
|---|---|
border-collapse | border-collapse: collapse; |
border-separate | border-collapse: separate; |
Table layout 2
Variants: none
| Class | CSS |
|---|---|
table-auto | table-layout: auto; |
table-fixed | table-layout: fixed; |