- Align Content
- Align Items
- Align Self
- Flex
- Flex Basis
- Flex Direction
- Flex Grow
- Flex Shrink
- Flex Wrap
- Gap
- Grid Auto Columns
- Grid Auto Flow
- Grid Auto Rows
- Grid Column Start / End
- Grid Row Start / End
- Grid Template Columns
- Grid Template Rows
- Justify Content
- Justify Items
- Justify Self
- Order
- Place Content
- Place Items
- Place Self
Utilities for controlling how rows are positioned in multi-row flex and grid containers.
TailwindJS token |
---|
align_content_utilities |
TailwindJS token | TailwindCSS token |
---|---|
content_around |
content-around |
content_baseline |
content-baseline |
content_between |
content-between |
content_center |
content-center |
content_end |
content-end |
content_evenly |
content-evenly |
content_normal |
content-normal |
content_start |
content-start |
content_stretch |
content-stretch |
Utilities for controlling how flex and grid items are positioned along a container's cross axis.
TailwindJS token |
---|
align_items_utilities |
TailwindJS token | TailwindCSS token |
---|---|
items_baseline |
items-baseline |
items_center |
items-center |
items_end |
items-end |
items_start |
items-start |
items_stretch |
items-stretch |
Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.
TailwindJS token |
---|
align_self_utilities |
TailwindJS token | TailwindCSS token |
---|---|
self_auto |
self-auto |
self_baseline |
self-baseline |
self_center |
self-center |
self_end |
self-end |
self_start |
self-start |
self_stretch |
self-stretch |
Utilities for controlling how flex items both grow and shrink.
TailwindJS token |
---|
flex_utilities |
TailwindJS token | TailwindCSS token |
---|---|
flex_1 |
flex-1 |
flex_auto |
flex-auto |
flex_initial |
flex-initial |
flex_none |
flex-none |
TailwindJS token | TailwindCSS token |
---|---|
flex_arbitrary , flex_arb |
flex-[…] |
Utilities for controlling the initial size of flex items.
TailwindJS token |
---|
flex_basis_utilities |
TailwindJS token | TailwindCSS token |
---|---|
basis_0 |
basis-0 |
basis_0_5 |
basis-0.5 |
basis_1 |
basis-1 |
basis_10 |
basis-10 |
basis_10_on_12 |
basis-10/12 |
basis_11 |
basis-11 |
basis_11_on_12 |
basis-11/12 |
basis_12 |
basis-12 |
basis_14 |
basis-14 |
basis_16 |
basis-16 |
basis_1_5 |
basis-1.5 |
basis_1_on_12 |
basis-1/12 |
basis_1_on_2 |
basis-1/2 |
basis_1_on_3 |
basis-1/3 |
basis_1_on_4 |
basis-1/4 |
basis_1_on_5 |
basis-1/5 |
basis_1_on_6 |
basis-1/6 |
basis_2 |
basis-2 |
basis_20 |
basis-20 |
basis_24 |
basis-24 |
basis_28 |
basis-28 |
basis_2_5 |
basis-2.5 |
basis_2_on_12 |
basis-2/12 |
basis_2_on_3 |
basis-2/3 |
basis_2_on_4 |
basis-2/4 |
basis_2_on_5 |
basis-2/5 |
basis_2_on_6 |
basis-2/6 |
basis_3 |
basis-3 |
basis_32 |
basis-32 |
basis_36 |
basis-36 |
basis_3_5 |
basis-3.5 |
basis_3_on_12 |
basis-3/12 |
basis_3_on_4 |
basis-3/4 |
basis_3_on_5 |
basis-3/5 |
basis_3_on_6 |
basis-3/6 |
basis_4 |
basis-4 |
basis_40 |
basis-40 |
basis_44 |
basis-44 |
basis_48 |
basis-48 |
basis_4_on_12 |
basis-4/12 |
basis_4_on_5 |
basis-4/5 |
basis_4_on_6 |
basis-4/6 |
basis_5 |
basis-5 |
basis_52 |
basis-52 |
basis_56 |
basis-56 |
basis_5_on_12 |
basis-5/12 |
basis_5_on_6 |
basis-5/6 |
basis_6 |
basis-6 |
basis_60 |
basis-60 |
basis_64 |
basis-64 |
basis_6_on_12 |
basis-6/12 |
basis_7 |
basis-7 |
basis_72 |
basis-72 |
basis_7_on_12 |
basis-7/12 |
basis_8 |
basis-8 |
basis_80 |
basis-80 |
basis_8_on_12 |
basis-8/12 |
basis_9 |
basis-9 |
basis_96 |
basis-96 |
basis_9_on_12 |
basis-9/12 |
basis_auto |
basis-auto |
basis_full |
basis-full |
basis_px |
basis-px |
TailwindJS token | TailwindCSS token |
---|---|
basis_arbitrary , basis_arb |
basis-[…] |
Utilities for controlling the direction of flex items.
TailwindJS token |
---|
flex_direction_utilities |
TailwindJS token | TailwindCSS token |
---|---|
flex_col |
flex-col |
flex_col_reverse |
flex-col-reverse |
flex_row |
flex-row |
flex_row_reverse |
flex-row-reverse |
Utilities for controlling how flex items grow.
TailwindJS token |
---|
flex_grow_utilities |
TailwindJS token | TailwindCSS token |
---|---|
grow |
grow |
grow_0 |
grow-0 |
TailwindJS token | TailwindCSS token |
---|---|
grow_arbitrary , grow_arb |
grow-[…] |
Utilities for controlling how flex items shrink.
TailwindJS token |
---|
flex_shrink_utilities |
TailwindJS token | TailwindCSS token |
---|---|
shrink |
shrink |
shrink_0 |
shrink-0 |
TailwindJS token | TailwindCSS token |
---|---|
shrink_arbitrary , shrink_arb |
shrink-[…] |
Utilities for controlling how flex items wrap.
TailwindJS token |
---|
flex_wrap_utilities |
TailwindJS token | TailwindCSS token |
---|---|
flex_nowrap |
flex-nowrap |
flex_wrap |
flex-wrap |
flex_wrap_reverse |
flex-wrap-reverse |
Utilities for controlling gutters between grid and flexbox items.
TailwindJS token |
---|
gap_utilities |
TailwindJS token | TailwindCSS token |
---|---|
gap_0 |
gap-0 |
gap_0_5 |
gap-0.5 |
gap_1 |
gap-1 |
gap_10 |
gap-10 |
gap_11 |
gap-11 |
gap_12 |
gap-12 |
gap_14 |
gap-14 |
gap_16 |
gap-16 |
gap_1_5 |
gap-1.5 |
gap_2 |
gap-2 |
gap_20 |
gap-20 |
gap_24 |
gap-24 |
gap_28 |
gap-28 |
gap_2_5 |
gap-2.5 |
gap_3 |
gap-3 |
gap_32 |
gap-32 |
gap_36 |
gap-36 |
gap_3_5 |
gap-3.5 |
gap_4 |
gap-4 |
gap_40 |
gap-40 |
gap_44 |
gap-44 |
gap_48 |
gap-48 |
gap_5 |
gap-5 |
gap_52 |
gap-52 |
gap_56 |
gap-56 |
gap_6 |
gap-6 |
gap_60 |
gap-60 |
gap_64 |
gap-64 |
gap_7 |
gap-7 |
gap_72 |
gap-72 |
gap_8 |
gap-8 |
gap_80 |
gap-80 |
gap_9 |
gap-9 |
gap_96 |
gap-96 |
gap_px |
gap-px |
gap_x_0 |
gap-x-0 |
gap_x_0_5 |
gap-x-0.5 |
gap_x_1 |
gap-x-1 |
gap_x_10 |
gap-x-10 |
gap_x_11 |
gap-x-11 |
gap_x_12 |
gap-x-12 |
gap_x_14 |
gap-x-14 |
gap_x_16 |
gap-x-16 |
gap_x_1_5 |
gap-x-1.5 |
gap_x_2 |
gap-x-2 |
gap_x_20 |
gap-x-20 |
gap_x_24 |
gap-x-24 |
gap_x_28 |
gap-x-28 |
gap_x_2_5 |
gap-x-2.5 |
gap_x_3 |
gap-x-3 |
gap_x_32 |
gap-x-32 |
gap_x_36 |
gap-x-36 |
gap_x_3_5 |
gap-x-3.5 |
gap_x_4 |
gap-x-4 |
gap_x_40 |
gap-x-40 |
gap_x_44 |
gap-x-44 |
gap_x_48 |
gap-x-48 |
gap_x_5 |
gap-x-5 |
gap_x_52 |
gap-x-52 |
gap_x_56 |
gap-x-56 |
gap_x_6 |
gap-x-6 |
gap_x_60 |
gap-x-60 |
gap_x_64 |
gap-x-64 |
gap_x_7 |
gap-x-7 |
gap_x_72 |
gap-x-72 |
gap_x_8 |
gap-x-8 |
gap_x_80 |
gap-x-80 |
gap_x_9 |
gap-x-9 |
gap_x_96 |
gap-x-96 |
gap_x_px |
gap-x-px |
gap_y_0 |
gap-y-0 |
gap_y_0_5 |
gap-y-0.5 |
gap_y_1 |
gap-y-1 |
gap_y_10 |
gap-y-10 |
gap_y_11 |
gap-y-11 |
gap_y_12 |
gap-y-12 |
gap_y_14 |
gap-y-14 |
gap_y_16 |
gap-y-16 |
gap_y_1_5 |
gap-y-1.5 |
gap_y_2 |
gap-y-2 |
gap_y_20 |
gap-y-20 |
gap_y_24 |
gap-y-24 |
gap_y_28 |
gap-y-28 |
gap_y_2_5 |
gap-y-2.5 |
gap_y_3 |
gap-y-3 |
gap_y_32 |
gap-y-32 |
gap_y_36 |
gap-y-36 |
gap_y_3_5 |
gap-y-3.5 |
gap_y_4 |
gap-y-4 |
gap_y_40 |
gap-y-40 |
gap_y_44 |
gap-y-44 |
gap_y_48 |
gap-y-48 |
gap_y_5 |
gap-y-5 |
gap_y_52 |
gap-y-52 |
gap_y_56 |
gap-y-56 |
gap_y_6 |
gap-y-6 |
gap_y_60 |
gap-y-60 |
gap_y_64 |
gap-y-64 |
gap_y_7 |
gap-y-7 |
gap_y_72 |
gap-y-72 |
gap_y_8 |
gap-y-8 |
gap_y_80 |
gap-y-80 |
gap_y_9 |
gap-y-9 |
gap_y_96 |
gap-y-96 |
gap_y_px |
gap-y-px |
TailwindJS token | TailwindCSS token |
---|---|
gap_arbitrary , gap_arb |
gap-[…] |
gap_x_arbitrary , gap_x_arb |
gap-x-[…] |
gap_y_arbitrary , gap_y_arb |
gap-y-[…] |
Utilities for controlling the size of implicitly-created grid columns.
TailwindJS token |
---|
grid_auto_columns_utilities |
TailwindJS token | TailwindCSS token |
---|---|
auto_cols_auto |
auto-cols-auto |
auto_cols_fr |
auto-cols-fr |
auto_cols_max |
auto-cols-max |
auto_cols_min |
auto-cols-min |
TailwindJS token | TailwindCSS token |
---|---|
auto_cols_arbitrary , auto_cols_arb |
auto-cols-[…] |
Utilities for controlling how elements in a grid are auto-placed.
TailwindJS token |
---|
grid_auto_flow_utilities |
TailwindJS token | TailwindCSS token |
---|---|
grid_flow_col |
grid-flow-col |
grid_flow_col_dense |
grid-flow-col-dense |
grid_flow_dense |
grid-flow-dense |
grid_flow_row |
grid-flow-row |
grid_flow_row_dense |
grid-flow-row-dense |
Utilities for controlling the size of implicitly-created grid rows.
TailwindJS token |
---|
grid_auto_rows_utilities |
TailwindJS token | TailwindCSS token |
---|---|
auto_rows_auto |
auto-rows-auto |
auto_rows_fr |
auto-rows-fr |
auto_rows_max |
auto-rows-max |
auto_rows_min |
auto-rows-min |
TailwindJS token | TailwindCSS token |
---|---|
auto_rows_arbitrary , auto_rows_arb |
auto-rows-[…] |
Utilities for controlling how elements are sized and placed across grid columns.
TailwindJS token |
---|
grid_column_start_end_utilities |
TailwindJS token | TailwindCSS token |
---|---|
col_auto |
col-auto |
col_end_1 |
col-end-1 |
col_end_10 |
col-end-10 |
col_end_11 |
col-end-11 |
col_end_12 |
col-end-12 |
col_end_13 |
col-end-13 |
col_end_2 |
col-end-2 |
col_end_3 |
col-end-3 |
col_end_4 |
col-end-4 |
col_end_5 |
col-end-5 |
col_end_6 |
col-end-6 |
col_end_7 |
col-end-7 |
col_end_8 |
col-end-8 |
col_end_9 |
col-end-9 |
col_end_auto |
col-end-auto |
col_span_1 |
col-span-1 |
col_span_10 |
col-span-10 |
col_span_11 |
col-span-11 |
col_span_12 |
col-span-12 |
col_span_2 |
col-span-2 |
col_span_3 |
col-span-3 |
col_span_4 |
col-span-4 |
col_span_5 |
col-span-5 |
col_span_6 |
col-span-6 |
col_span_7 |
col-span-7 |
col_span_8 |
col-span-8 |
col_span_9 |
col-span-9 |
col_span_full |
col-span-full |
col_start_1 |
col-start-1 |
col_start_10 |
col-start-10 |
col_start_11 |
col-start-11 |
col_start_12 |
col-start-12 |
col_start_13 |
col-start-13 |
col_start_2 |
col-start-2 |
col_start_3 |
col-start-3 |
col_start_4 |
col-start-4 |
col_start_5 |
col-start-5 |
col_start_6 |
col-start-6 |
col_start_7 |
col-start-7 |
col_start_8 |
col-start-8 |
col_start_9 |
col-start-9 |
col_start_auto |
col-start-auto |
TailwindJS token | TailwindCSS token |
---|---|
col_arbitrary , col_arb |
col-[…] |
col_end_arbitrary , col_end_arb |
col-end-[…] |
col_span_arbitrary , col_span_arb |
col-span-[…] |
col_start_arbitrary , col_start_arb |
col-start-[…] |
Utilities for controlling how elements are sized and placed across grid rows.
TailwindJS token |
---|
grid_row_start_end_utilities |
TailwindJS token | TailwindCSS token |
---|---|
row_auto |
row-auto |
row_end_1 |
row-end-1 |
row_end_10 |
row-end-10 |
row_end_11 |
row-end-11 |
row_end_12 |
row-end-12 |
row_end_13 |
row-end-13 |
row_end_2 |
row-end-2 |
row_end_3 |
row-end-3 |
row_end_4 |
row-end-4 |
row_end_5 |
row-end-5 |
row_end_6 |
row-end-6 |
row_end_7 |
row-end-7 |
row_end_8 |
row-end-8 |
row_end_9 |
row-end-9 |
row_end_auto |
row-end-auto |
row_span_1 |
row-span-1 |
row_span_10 |
row-span-10 |
row_span_11 |
row-span-11 |
row_span_12 |
row-span-12 |
row_span_2 |
row-span-2 |
row_span_3 |
row-span-3 |
row_span_4 |
row-span-4 |
row_span_5 |
row-span-5 |
row_span_6 |
row-span-6 |
row_span_7 |
row-span-7 |
row_span_8 |
row-span-8 |
row_span_9 |
row-span-9 |
row_span_full |
row-span-full |
row_start_1 |
row-start-1 |
row_start_10 |
row-start-10 |
row_start_11 |
row-start-11 |
row_start_12 |
row-start-12 |
row_start_13 |
row-start-13 |
row_start_2 |
row-start-2 |
row_start_3 |
row-start-3 |
row_start_4 |
row-start-4 |
row_start_5 |
row-start-5 |
row_start_6 |
row-start-6 |
row_start_7 |
row-start-7 |
row_start_8 |
row-start-8 |
row_start_9 |
row-start-9 |
row_start_auto |
row-start-auto |
TailwindJS token | TailwindCSS token |
---|---|
row_arbitrary , row_arb |
row-[…] |
row_end_arbitrary , row_end_arb |
row-end-[…] |
row_span_arbitrary , row_span_arb |
row-span-[…] |
row_start_arbitrary , row_start_arb |
row-start-[…] |
Utilities for specifying the columns in a grid layout.
TailwindJS token |
---|
grid_template_columns_utilities |
TailwindJS token | TailwindCSS token |
---|---|
grid_cols_1 |
grid-cols-1 |
grid_cols_10 |
grid-cols-10 |
grid_cols_11 |
grid-cols-11 |
grid_cols_12 |
grid-cols-12 |
grid_cols_2 |
grid-cols-2 |
grid_cols_3 |
grid-cols-3 |
grid_cols_4 |
grid-cols-4 |
grid_cols_5 |
grid-cols-5 |
grid_cols_6 |
grid-cols-6 |
grid_cols_7 |
grid-cols-7 |
grid_cols_8 |
grid-cols-8 |
grid_cols_9 |
grid-cols-9 |
grid_cols_none |
grid-cols-none |
grid_cols_subgrid |
grid-cols-subgrid |
TailwindJS token | TailwindCSS token |
---|---|
grid_cols_arbitrary , grid_cols_arb |
grid-cols-[…] |
Utilities for specifying the rows in a grid layout.
TailwindJS token |
---|
grid_template_rows_utilities |
TailwindJS token | TailwindCSS token |
---|---|
grid_rows_1 |
grid-rows-1 |
grid_rows_10 |
grid-rows-10 |
grid_rows_11 |
grid-rows-11 |
grid_rows_12 |
grid-rows-12 |
grid_rows_2 |
grid-rows-2 |
grid_rows_3 |
grid-rows-3 |
grid_rows_4 |
grid-rows-4 |
grid_rows_5 |
grid-rows-5 |
grid_rows_6 |
grid-rows-6 |
grid_rows_7 |
grid-rows-7 |
grid_rows_8 |
grid-rows-8 |
grid_rows_9 |
grid-rows-9 |
grid_rows_none |
grid-rows-none |
grid_rows_subgrid |
grid-rows-subgrid |
TailwindJS token | TailwindCSS token |
---|---|
grid_rows_arbitrary , grid_rows_arb |
grid-rows-[…] |
Utilities for controlling how flex and grid items are positioned along a container's main axis.
TailwindJS token |
---|
justify_content_utilities |
TailwindJS token | TailwindCSS token |
---|---|
justify_around |
justify-around |
justify_between |
justify-between |
justify_center |
justify-center |
justify_end |
justify-end |
justify_evenly |
justify-evenly |
justify_normal |
justify-normal |
justify_start |
justify-start |
justify_stretch |
justify-stretch |
Utilities for controlling how grid items are aligned along their inline axis.
TailwindJS token |
---|
justify_items_utilities |
TailwindJS token | TailwindCSS token |
---|---|
justify_items_center |
justify-items-center |
justify_items_end |
justify-items-end |
justify_items_start |
justify-items-start |
justify_items_stretch |
justify-items-stretch |
Utilities for controlling how an individual grid item is aligned along its inline axis.
TailwindJS token |
---|
justify_self_utilities |
TailwindJS token | TailwindCSS token |
---|---|
justify_self_auto |
justify-self-auto |
justify_self_center |
justify-self-center |
justify_self_end |
justify-self-end |
justify_self_start |
justify-self-start |
justify_self_stretch |
justify-self-stretch |
Utilities for controlling the order of flex and grid items.
TailwindJS token |
---|
order_utilities |
TailwindJS token | TailwindCSS token |
---|---|
order_1 |
order-1 |
order_10 |
order-10 |
order_11 |
order-11 |
order_12 |
order-12 |
order_2 |
order-2 |
order_3 |
order-3 |
order_4 |
order-4 |
order_5 |
order-5 |
order_6 |
order-6 |
order_7 |
order-7 |
order_8 |
order-8 |
order_9 |
order-9 |
order_first |
order-first |
order_last |
order-last |
order_none |
order-none |
TailwindJS token | TailwindCSS token |
---|---|
order_arbitrary , order_arb |
order-[…] |
Utilities for controlling how content is justified and aligned at the same time.
TailwindJS token |
---|
place_content_utilities |
TailwindJS token | TailwindCSS token |
---|---|
place_content_around |
place-content-around |
place_content_baseline |
place-content-baseline |
place_content_between |
place-content-between |
place_content_center |
place-content-center |
place_content_end |
place-content-end |
place_content_evenly |
place-content-evenly |
place_content_start |
place-content-start |
place_content_stretch |
place-content-stretch |
Utilities for controlling how items are justified and aligned at the same time.
TailwindJS token |
---|
place_items_utilities |
TailwindJS token | TailwindCSS token |
---|---|
place_items_baseline |
place-items-baseline |
place_items_center |
place-items-center |
place_items_end |
place-items-end |
place_items_start |
place-items-start |
place_items_stretch |
place-items-stretch |
Utilities for controlling how an individual item is justified and aligned at the same time.
TailwindJS token |
---|
place_self_utilities |
TailwindJS token | TailwindCSS token |
---|---|
place_self_auto |
place-self-auto |
place_self_center |
place-self-center |
place_self_end |
place-self-end |
place_self_start |
place-self-start |
place_self_stretch |
place-self-stretch |