1. Flex basis: Utilities for controlling the initial size of flex items.

basis-0 flex-basis: 0px;

basis-1 flex-basis: 0.25rem; /* 4px */
basis-2 flex-basis: 0.5rem; /* 8px */
basis-3 flex-basis: 0.75rem; /* 12px */
basis-4 flex-basis: 1rem; /* 16px */
basis-5 flex-basis: 1.25rem; /* 20px */
basis-6 flex-basis: 1.5rem; /* 24px */
basis-7 flex-basis: 1.75rem; /* 28px */
basis-8 flex-basis: 2rem; /* 32px */
basis-9 flex-basis: 2.25rem; /* 36px */
basis-10 flex-basis: 2.5rem; /* 40px */
basis-11 flex-basis: 2.75rem; /* 44px */
basis-12 flex-basis: 3rem; /* 48px */
basis-14 flex-basis: 3.5rem; /* 56px */
basis-16 flex-basis: 4rem; /* 64px */
basis-20 flex-basis: 5rem; /* 80px */
basis-24 flex-basis: 6rem; /* 96px */
basis-28 flex-basis: 7rem; /* 112px */
basis-32 flex-basis: 8rem; /* 128px */
basis-36 flex-basis: 9rem; /* 144px */
basis-40 flex-basis: 10rem; /* 160px */
basis-44 flex-basis: 11rem; /* 176px */
basis-48 flex-basis: 12rem; /* 192px */
basis-52 flex-basis: 13rem; /* 208px */
basis-56 flex-basis: 14rem; /* 224px */
basis-60 flex-basis: 15rem; /* 240px */
basis-64 flex-basis: 16rem; /* 256px */
basis-72 flex-basis: 18rem; /* 288px */
basis-80 flex-basis: 20rem; /* 320px */
basis-96 flex-basis: 24rem; /* 384px */
basis-auto flex-basis: auto;
basis-px flex-basis: 1px;
basis-0.5 flex-basis: 0.125rem; /* 2px */
basis-1.5 flex-basis: 0.375rem; /* 6px */
basis-2.5 flex-basis: 0.625rem; /* 10px */
basis-3.5 flex-basis: 0.875rem; /* 14px */
basis-1/2 flex-basis: 50%;
basis-1/3 flex-basis: 33.333333%;
basis-2/3 flex-basis: 66.666667%;
basis-1/4 flex-basis: 25%;
basis-2/4 flex-basis: 50%;
basis-3/4 flex-basis: 75%;
basis-1/5 flex-basis: 20%;
basis-2/5 flex-basis: 40%;
basis-3/5 flex-basis: 60%;
basis-4/5 flex-basis: 80%;
basis-1/6 flex-basis: 16.666667%;
basis-2/6 flex-basis: 33.333333%;
basis-3/6 flex-basis: 50%;
basis-4/6 flex-basis: 66.666667%;
basis-5/6 flex-basis: 83.333333%;
basis-1/12 flex-basis: 8.333333%;
basis-2/12 flex-basis: 16.666667%;
basis-3/12 flex-basis: 25%;
basis-4/12 flex-basis: 33.333333%;
basis-5/12 flex-basis: 41.666667%;
basis-6/12 flex-basis: 50%;
basis-7/12 flex-basis: 58.333333%;
basis-8/12 flex-basis: 66.666667%;
basis-9/12 flex-basis: 75%;
 basis-10/12 flex-basis: 83.333333%;
basis-11/12 flex-basis: 91.666667%;
basis-full flex-basis: 100%;

2. Flex direction: Utilities for controlling the direction of flex items.

flex-row flex-direction: row;

flex-row-reverse flex-direction: row-reverse;
flex-col flex-direction: column;
flex-col-reverse flex-direction: column-reverse;

3. Flex wrap: Utilities for controlling how flex items wrap.

flex-wrap flex-wrap: wrap;

flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

4. Flex: Utilities for controlling how flex items both grow and shrink.

flex-1 flex: 1 1 0%;

flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;

5. Flex grow: Utilities for controlling how flex items grow.

grow flex-grow: 1;
grow-0 flex-grow: 0;

6. Flex shrink: Utilities for controlling how flex items shrink.

shrink flex-shrink: 1;
shrink-0 flex-shrink: 0;

7. Order: Utilities for controlling the order of flex and grid items.

order-1 order: 1;
 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-10 order: 10;
order-11 order: 11;
order-12 order: 12;
order-first order: -9999;
order-last order: 9999;
order-none order: 0;

8. Grid template columns: Utilities for specifying the columns in a grid layout.

grid-cols-1 grid-template-columns: repeat(1, minmax(0,

1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0,
1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0,
1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0,
1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0,
1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0,
1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0,
1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0,
 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0,
1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0,
1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0,
1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0,
1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;

9. Grid column start/end: Utilities for controlling how elements are sized and placed across grid columns.

col-auto grid-column: auto;

col-span-1 grid-column: span 1 / span 1;
col-span-2 grid-column: span 2 / span 2;
col-span-3 grid-column: span 3 / span 3;
col-span-4 grid-column: span 4 / span 4;
col-span-5 grid-column: span 5 / span 5;
col-span-6 grid-column: span 6 / span 6;
col-span-7 grid-column: span 7 / span 7;
col-span-8 grid-column: span 8 / span 8;
col-span-9 grid-column: span 9 / span 9;
col-span-10 grid-column: span 10 / span 10;
col-span-11 grid-column: span 11 / span 11;
col-span-12 grid-column: span 12 / span 12;
col-span-full grid-column: 1 / -1;
col-start-1 grid-column-start: 1;
col-start-2 grid-column-start: 2;
col-start-3 grid-column-start: 3;
col-start-4 grid-column-start: 4;
 col-start-5 grid-column-start: 5;
col-start-6 grid-column-start: 6;
col-start-7 grid-column-start: 7;
col-start-8 grid-column-start: 8;
col-start-9 grid-column-start: 9;
col-start-10 grid-column-start: 10;
col-start-11 grid-column-start: 11;
col-start-12 grid-column-start: 12;
col-start-13 grid-column-start: 13;
col-start-auto grid-column-start: auto;
col-end-1 grid-column-end: 1;
col-end-2 grid-column-end: 2;
col-end-3 grid-column-end: 3;
col-end-4 grid-column-end: 4;
col-end-5 grid-column-end: 5;
col-end-6 grid-column-end: 6;
col-end-7 grid-column-end: 7;
col-end-8 grid-column-end: 8;
col-end-9 grid-column-end: 9;
col-end-10 grid-column-end: 10;
col-end-11 grid-column-end: 11;
col-end-12 grid-column-end: 12;
col-end-13 grid-column-end: 13;
col-end-auto grid-column-end: auto;

10. Grid template row: Utilities for specifying the rows in a grid layout.

grid-rows-1 grid-template-rows: repeat(1, minmax(0, 1fr));

grid-rows-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5 grid-template-rows: repeat(5, minmax(0, 1fr));
 grid-rows-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7 grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8 grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9 grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10 grid-template-rows: repeat(10, minmax(0,
1fr));
grid-rows-11 grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12 grid-template-rows: repeat(12, minmax(0,
1fr));
grid-rows-none grid-template-rows: none;
grid-rows-subgrid grid-template-rows: subgrid;

11. Grid row start/row: Utilities for controlling how elements are sized and placed across grid rows.

row-auto grid-row: auto;

row-span-1 grid-row: span 1 / span 1;
row-span-2 grid-row: span 2 / span 2;
row-span-3 grid-row: span 3 / span 3;
row-span-4 grid-row: span 4 / span 4;
row-span-5 grid-row: span 5 / span 5;
row-span-6 grid-row: span 6 / span 6;
row-span-7 grid-row: span 7 / span 7;
row-span-8 grid-row: span 8 / span 8;
row-span-9 grid-row: span 9 / span 9;
row-span-10 grid-row: span 10 / span 10;
row-span-11 grid-row: span 11 / span 11;
row-span-12 grid-row: span 12 / span 12;
row-span-full grid-row: 1 / -1;
row-start-1 grid-row-start: 1;
row-start-2 grid-row-start: 2;
row-start-3 grid-row-start: 3;
row-start-4 grid-row-start: 4;
 row-start-5 grid-row-start: 5;
row-start-6 grid-row-start: 6;
row-start-7 grid-row-start: 7;
row-start-8 grid-row-start: 8;
row-start-9 grid-row-start: 9;
row-start-10 grid-row-start: 10;
row-start-11 grid-row-start: 11;
row-start-12 grid-row-start: 12;
row-start-13 grid-row-start: 13;
row-start-auto grid-row-start: auto;
row-end-1 grid-row-end: 1;
row-end-2 grid-row-end: 2;
row-end-3 grid-row-end: 3;
row-end-4 grid-row-end: 4;
row-end-5 grid-row-end: 5;
row-end-6 grid-row-end: 6;
row-end-7 grid-row-end: 7;
row-end-8 grid-row-end: 8;
row-end-9 grid-row-end: 9;
row-end-10 grid-row-end: 10;
row-end-11 grid-row-end: 11;
row-end-12 grid-row-end: 12;
row-end-13 grid-row-end: 13;
row-end-auto grid-row-end: auto;

12. Grid auto flow: Utilities for controlling how elements in a grid are auto-placed.

grid-flow-row grid-auto-flow: row;

grid-flow-col grid-auto-flow: column;
grid-flow-dense grid-auto-flow: dense;
grid-flow-row-dense grid-auto-flow: row dense;
grid-flow-col-dense grid-auto-flow: column dense;
13. Grid auto columns: Utilities for controlling the size of implicitly-created grid columns.

auto-cols-auto grid-auto-columns: auto;

auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-auto-columns: minmax(0, 1fr);

14. Grid auto rows: Utilities for controlling the size of implicitly-created grid rows.

auto-rows-auto grid-auto-rows: auto;

auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);

15. Gap: Utilities for controlling gutters between grid and flexbox items.
*: 0/px/0.5/1/1.5/2/2.5/3/3.5/4/5/6/7/8/9/10/11/12/14/16/20/24/28/32/36/40/44/48/52/56/60/64/72/80/96

gap-* gap: *;
gap-x-* column-gap: *;
gap-y-* row-gap: *;

16. Justify content: Utilities for controlling how flex and grid items are positioned along a container's main axis.

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;

17. Justify items: Utilities for controlling how grid items are aligned along their inline axis.

justify-items-start justify-items: start;

 justify-items-end justify-items: end;
justify-items-center justify-items: center;
justify-items-stretch justify-items: stretch;

18. Justify self: Utilities for controlling how an individual grid item is aligned along its inline axis.

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;

19. Aligns content: Utilities for controlling how rows are positioned in multi-row flex and grid containers.

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;

20. Aligns items: Utilities for controlling how flex and grid items are positioned along a container's cross axis.

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;

21. Align self: Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

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;

22. Place content: Utilities for controlling how content is justified and aligned at the same time.

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;

23. Place items: Utilities for controlling how items are justified and aligned at the same time.

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;

24. Place self: Utilities for controlling how an individual item is justified and aligned at the same time.

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;