Utilities
Alignment
Justify, align and place utilities for flex and grid items and content.
55classes
198variant classes
9properties
Live example
<div class="grid grid-cols-3 gap-3">
<div class="flex h-24 items-start justify-start rounded-xl border bg-surface p-2"><span class="size-6 rounded bg-primary"></span></div>
<div class="grid h-24 place-items-center rounded-xl border bg-surface p-2"><span class="size-6 rounded bg-primary"></span></div>
<div class="flex h-24 items-end justify-end rounded-xl border bg-surface p-2"><span class="size-6 rounded bg-primary"></span></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:items-start. 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 | not generated | 0 |
| 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: | 13 |
| Media and direction | print:screen: | 19 |
Align items 5
Variants: sm:md:lg:xl:2xl:@xs:@sm:@md:@lg:@xl:print:screen:
| Class | CSS |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-center | align-items: center; |
items-baseline | align-items: baseline; |
items-stretch | align-items: stretch; |
Justify content 8
Variants: sm:md:lg:xl:2xl:@xs:@sm:@md:@lg:@xl:print:screen:
| Class | CSS |
|---|---|
justify-normal | justify-content: normal; |
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
Justify items 4
Variants: none
| Class | CSS |
|---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-items: stretch; |
Justify self 5
Variants: none
| Class | CSS |
|---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-end | justify-self: end; |
justify-self-center | justify-self: center; |
justify-self-stretch | justify-self: stretch; |
Align content 9
Variants: none
| Class | CSS |
|---|---|
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
Align self 6
Variants: sm:md:lg:xl:2xl:print:screen:
| Class | CSS |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-center | align-self: center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
Place content 8
Variants: none
| Class | CSS |
|---|---|
place-content-center | place-content: center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-baseline | place-content: baseline; |
place-content-stretch | place-content: stretch; |
Place items 5
Variants: none
| Class | CSS |
|---|---|
place-items-start | place-items: start; |
place-items-end | place-items: end; |
place-items-center | place-items: center; |
place-items-baseline | place-items: baseline; |
place-items-stretch | place-items: stretch; |
Place self 5
Variants: none
| Class | CSS |
|---|---|
place-self-auto | place-self: auto; |
place-self-start | place-self: start; |
place-self-end | place-self: end; |
place-self-center | place-self: center; |
place-self-stretch | place-self: stretch; |