Get Full Access 50% off

Blog 18 min read

Tailwind CSS v4.1 Cheat Sheet

A complete cheat sheet for Tailwind CSS v4.1, including layout, spacing, typography, flexbox, grid, and all core utility classes. Perfect for fast lookup and reference.

Tailwind CSS v4.1 introduces a faster, more flexible utility-first workflow, no config file is needed!. With native CSS variables, container queries, dynamic class support, and a modern OKLCH color palette, it’s built for speed and precision.

Let’s have a look!

Use it to move faster, write cleaner code, and get the most out of what Tailwind v4.1 has to offer.

Layout

aspect-ratio

(Docs: Tailwind Docs - aspect-ratio)

Utilities for controlling the aspect ratio of an element.

  • .aspect-<ratio> – aspect-ratio: <ratio>;
  • .aspect-square – aspect-ratio: 1 / 1;
  • .aspect-video – aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */
  • .aspect-auto – aspect-ratio: auto;
  • .aspect-(<custom-property>) – aspect-ratio: var(<custom-property>);
  • .aspect-[<value>] – aspect-ratio: <value>;

columns

(Docs: Tailwind Docs - columns)

Utilities for controlling the number of columns within an element.

  • .columns-<number> – columns: <number>;
  • .columns-3xs – columns: var(--container-3xs); /* 16rem (256px) */
  • .columns-2xs – columns: var(--container-2xs); /* 18rem (288px) */
  • .columns-xs – columns: var(--container-xs); /* 20rem (320px) */
  • .columns-sm – columns: var(--container-sm); /* 24rem (384px) */
  • .columns-md – columns: var(--container-md); /* 28rem (448px) */
  • .columns-lg – columns: var(--container-lg); /* 32rem (512px) */
  • .columns-xl – columns: var(--container-xl); /* 36rem (576px) */
  • .columns-2xl – columns: var(--container-2xl); /* 42rem (672px) */
  • .columns-3xl – columns: var(--container-3xl); /* 48rem (768px) */
  • .columns-4xl – columns: var(--container-4xl); /* 56rem (896px) */
  • .columns-5xl – columns: var(--container-5xl); /* 64rem (1024px) */
  • .columns-6xl – columns: var(--container-6xl); /* 72rem (1152px) */
  • .columns-7xl – columns: var(--container-7xl); /* 80rem (1280px) */
  • .columns-auto – columns: auto;
  • .columns-(<custom-property>) – columns: var(<custom-property>);
  • .columns-[<value>] – columns: <value>;

break-after

(Docs: Tailwind Docs - break-after)

Utilities for controlling how a column or page should break after an element.

  • .break-after-auto – break-after: auto;
  • .break-after-avoid – break-after: avoid;
  • .break-after-all – break-after: all;
  • .break-after-avoid-page – break-after: avoid-page;
  • .break-after-page – break-after: page;
  • .break-after-left – break-after: left;
  • .break-after-right – break-after: right;
  • .break-after-column – break-after: column;

break-before

(Docs: Tailwind Docs - break-before)

Utilities for controlling how a column or page should break before an element.

  • .break-before-auto – break-before: auto;
  • .break-before-avoid – break-before: avoid;
  • .break-before-all – break-before: all;
  • .break-before-avoid-page – break-before: avoid-page;
  • .break-before-page – break-before: page;
  • .break-before-left – break-before: left;
  • .break-before-right – break-before: right;
  • .break-before-column – break-before: column;

break-inside

(Docs: Tailwind Docs - break-inside)

Utilities for controlling how a column or page should break within an element.

  • .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;

box-decoration-break

(Docs: Tailwind Docs - box-decoration-break)

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

  • .box-decoration-clone – box-decoration-break: clone;
  • .box-decoration-slice – box-decoration-break: slice;

box-sizing

(Docs: Tailwind Docs - box-sizing)

Utilities for controlling how the browser should calculate an element’s total size.

  • .box-border – box-sizing: border-box;
  • .box-content – box-sizing: content-box;

display

(Docs: Tailwind Docs - display)

Utilities for controlling the display box type of an element.

  • .inline – display: inline;
  • .block – display: block;
  • .inline-block – display: inline-block;
  • .flow-root – display: flow-root;
  • .flex – display: flex;
  • .inline-flex – display: inline-flex;
  • .grid – display: grid;
  • .inline-grid – display: inline-grid;
  • .contents – display: contents;
  • .table – display: table;
  • .inline-table – display: inline-table;
  • .table-caption – display: table-caption;
  • .table-cell – display: table-cell;
  • .table-column – display: table-column;
  • .table-column-group – display: table-column-group;
  • .table-footer-group – display: table-footer-group;
  • .table-header-group – display: table-header-group;
  • .table-row-group – display: table-row-group;
  • .table-row – display: table-row;
  • .list-item – display: list-item;
  • .hidden – display: none;
  • .sr-only – (visually hidden for screen readers; applies position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;)
  • .not-sr-only – (reverses sr-only styles; resets positioning and clipping for normal display)

float

(Docs: Tailwind Docs - float)

Utilities for controlling the wrapping of content around an element.

  • .float-right – float: right;
  • .float-left – float: left;
  • .float-start – float: inline-start;
  • .float-end – float: inline-end;
  • .float-none – float: none;

clear

(Docs: Tailwind Docs - clear)

Utilities for controlling the wrapping of content around an element.

  • .clear-left – clear: left;
  • .clear-right – clear: right;
  • .clear-both – clear: both;
  • .clear-start – clear: inline-start;
  • .clear-end – clear: inline-end;
  • .clear-none – clear: none;

isolation

(Docs: Tailwind Docs - isolation)

Utilities for controlling whether an element should explicitly create a new stacking context.

  • .isolate – isolation: isolate;
  • .isolation-auto – isolation: auto;

object-fit

(Docs: Tailwind Docs - object-fit)

Utilities for controlling how a replaced element’s content (e.g., an image or video) should be resized.

  • .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

(Docs: Tailwind Docs - object-position)

Utilities for controlling how a replaced element’s content is positioned within its container.

  • .object-top-left – object-position: top left;
  • .object-top – object-position: top;
  • .object-top-right – object-position: top right;
  • .object-left – object-position: left;
  • .object-center – object-position: center;
  • .object-right – object-position: right;
  • .object-bottom-left – object-position: bottom left;
  • .object-bottom – object-position: bottom;
  • .object-bottom-right – object-position: bottom right;
  • .object-(<custom-property>) – object-position: var(<custom-property>);
  • .object-[<value>] – object-position: <value>;

overflow

(Docs: Tailwind Docs - overflow)

Utilities for controlling how an element handles content that is too large for its container.

  • .overflow-auto – overflow: auto;
  • .overflow-hidden – overflow: hidden;
  • .overflow-clip – overflow: clip;
  • .overflow-visible – overflow: visible;
  • .overflow-scroll – overflow: scroll;
  • .overflow-x-auto – overflow-x: auto;
  • .overflow-y-auto – overflow-y: auto;
  • .overflow-x-hidden – overflow-x: hidden;
  • .overflow-y-hidden – overflow-y: hidden;
  • .overflow-x-clip – overflow-x: clip;
  • .overflow-y-clip – overflow-y: clip;
  • .overflow-x-visible – overflow-x: visible;
  • .overflow-y-visible – overflow-y: visible;
  • .overflow-x-scroll – overflow-x: scroll;
  • .overflow-y-scroll – overflow-y: scroll;

overscroll-behavior

(Docs: Tailwind Docs - overscroll-behavior)

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

  • .overscroll-auto – overscroll-behavior: auto;
  • .overscroll-contain – overscroll-behavior: contain;
  • .overscroll-none – overscroll-behavior: none;
  • .overscroll-x-auto – overscroll-behavior-x: auto;
  • .overscroll-x-contain – overscroll-behavior-x: contain;
  • .overscroll-x-none – overscroll-behavior-x: none;
  • .overscroll-y-auto – overscroll-behavior-y: auto;
  • .overscroll-y-contain – overscroll-behavior-y: contain;
  • .overscroll-y-none – overscroll-behavior-y: none;

position

(Docs: Tailwind Docs - position)

Utilities for controlling how an element is positioned in the document.

  • .static – position: static;
  • .fixed – position: fixed;
  • .absolute – position: absolute;
  • .relative – position: relative;
  • .sticky – position: sticky;

top / right / bottom / left

(Docs: Tailwind Docs - top/right/bottom/left)

Utilities for controlling the placement of positioned elements.

All directions (inset-*):

  • .inset-<number> – inset: calc(var(--spacing) * <number>);
  • .-inset-<number> – inset: calc(var(--spacing) * -<number>);
  • .inset-<fraction> – inset: calc(<fraction> * 100%);
  • .-inset-<fraction> – inset: calc(<fraction> * -100%);
  • .inset-px – inset: 1px;
  • .-inset-px – inset: -1px;
  • .inset-full – inset: 100%;
  • .-inset-full – inset: -100%;
  • .inset-auto – inset: auto;
  • .inset-(<custom-property>) – inset: var(<custom-property>);
  • .inset-[<value>] – inset: <value>;

Inline (horizontal) axes (inset-x-*):

  • .inset-x-<number> – inset-inline: calc(var(--spacing) * <number>);
  • .-inset-x-<number> – inset-inline: calc(var(--spacing) * -<number>);
  • .inset-x-<fraction> – inset-inline: calc(<fraction> * 100%);
  • .-inset-x-<fraction> – inset-inline: calc(<fraction> * -100%);
  • .inset-x-px – inset-inline: 1px;
  • .-inset-x-px – inset-inline: -1px;
  • .inset-x-full – inset-inline: 100%;
  • .-inset-x-full – inset-inline: -100%;
  • .inset-x-auto – inset-inline: auto;
  • .inset-x-(<custom-property>) – inset-inline: var(<custom-property>);
  • .inset-x-[<value>] – inset-inline: <value>;

Block (vertical) axes (inset-y-*):

  • .inset-y-<number> – inset-block: calc(var(--spacing) * <number>);
  • .-inset-y-<number> – inset-block: calc(var(--spacing) * -<number>);
  • .inset-y-<fraction> – inset-block: calc(<fraction> * 100%);
  • .-inset-y-<fraction> – inset-block: calc(<fraction> * -100%);
  • .inset-y-px – inset-block: 1px;
  • .-inset-y-px – inset-block: -1px;
  • .inset-y-full – inset-block: 100%;
  • .-inset-y-full – inset-block: -100%;
  • .inset-y-auto – inset-block: auto;
  • .inset-y-(<custom-property>) – inset-block: var(<custom-property>);
  • .inset-y-[<value>] – inset-block: <value>;

Logical start (start-*) and end (end-*):

  • .start-<number> – inset-inline-start: calc(var(--spacing) * <number>);

  • .-start-<number> – inset-inline-start: calc(var(--spacing) * -<number>);

  • .start-<fraction> – inset-inline-start: calc(<fraction> * 100%);

  • .-start-<fraction> – inset-inline-start: calc(<fraction> * -100%);

  • .start-px – inset-inline-start: 1px;

  • .-start-px – inset-inline-start: -1px;

  • .start-full – inset-inline-start: 100%;

  • .-start-full – inset-inline-start: -100%;

  • .start-auto – inset-inline-start: auto;

  • .start-(<custom-property>) – inset-inline-start: var(<custom-property>);

  • .start-[<value>] – inset-inline-start: <value>;

  • .end-<number> – inset-inline-end: calc(var(--spacing) * <number>);

  • .-end-<number> – inset-inline-end: calc(var(--spacing) * -<number>);

  • .end-<fraction> – inset-inline-end: calc(<fraction> * 100%);

  • .-end-<fraction> – inset-inline-end: calc(<fraction> * -100%);

  • .end-px – inset-inline-end: 1px;

  • .-end-px – inset-inline-end: -1px;

  • .end-full – inset-inline-end: 100%;

  • .-end-full – inset-inline-end: -100%;

  • .end-auto – inset-inline-end: auto;

  • .end-(<custom-property>) – inset-inline-end: var(<custom-property>);

  • .end-[<value>] – inset-inline-end: <value>;

Explicit top/right/bottom/left:

  • .top-<number> – top: calc(var(--spacing) * <number>);

  • .-top-<number> – top: calc(var(--spacing) * -<number>);

  • .top-<fraction> – top: calc(<fraction> * 100%);

  • .-top-<fraction> – top: calc(<fraction> * -100%);

  • .top-px – top: 1px;

  • .-top-px – top: -1px;

  • .top-full – top: 100%;

  • .-top-full – top: -100%;

  • .top-auto – top: auto;

  • .top-(<custom-property>) – top: var(<custom-property>);

  • .top-[<value>] – top: <value>;

  • .right-<number> – right: calc(var(--spacing) * <number>);

  • .-right-<number> – right: calc(var(--spacing) * -<number>);

  • .right-<fraction> – right: calc(<fraction> * 100%);

  • .-right-<fraction> – right: calc(<fraction> * -100%);

  • .right-px – right: 1px;

  • .-right-px – right: -1px;

  • .right-full – right: 100%;

  • .-right-full – right: -100%;

  • .right-auto – right: auto;

  • .right-(<custom-property>) – right: var(<custom-property>);

  • .right-[<value>] – right: <value>;

  • .bottom-<number> – bottom: calc(var(--spacing) * <number>);

  • .-bottom-<number> – bottom: calc(var(--spacing) * -<number>);

  • .bottom-<fraction> – bottom: calc(<fraction> * 100%);

  • .-bottom-<fraction> – bottom: calc(<fraction> * -100%);

  • .bottom-px – bottom: 1px;

  • .-bottom-px – bottom: -1px;

  • .bottom-full – bottom: 100%;

  • .-bottom-full – bottom: -100%;

  • .bottom-auto – bottom: auto;

  • .bottom-(<custom-property>) – bottom: var(<custom-property>);

  • .bottom-[<value>] – bottom: <value>;

  • .left-<number> – left: calc(var(--spacing) * <number>);

  • .-left-<number> – left: calc(var(--spacing) * -<number>);

  • .left-<fraction> – left: calc(<fraction> * 100%);

  • .-left-<fraction> – left: calc(<fraction> * -100%);

  • .left-px – left: 1px;

  • .-left-px – left: -1px;

  • .left-full – left: 100%;

  • .-left-full – left: -100%;

  • .left-auto – left: auto;

  • .left-(<custom-property>) – left: var(<custom-property>);

  • .left-[<value>] – left: <value>;

visibility

(Docs: Tailwind Docs - visibility)

Utilities for controlling the visibility of an element.

  • .visible – visibility: visible;
  • .invisible – visibility: hidden;
  • .collapse – visibility: collapse; (for table elements, collapses the row/column)

z-index

(Docs: Tailwind Docs - z-index)

Utilities for controlling the stack order of an element.

  • .z-<number> – z-index: <number>;
  • .z-auto – z-index: auto;
  • .z-[<value>] – z-index: <value>;
  • .z-(<custom-property>) – z-index: var(<custom-property>);

Flexbox & Grid

flex-basis

(Docs: Tailwind Docs - flex-basis)

Utilities for controlling the initial size of flex items.

  • .basis-<number> – flex-basis: calc(var(--spacing) * <number>);
  • .basis-<fraction> – flex-basis: calc(<fraction> * 100%);
  • .basis-full – flex-basis: 100%;
  • .basis-auto – flex-basis: auto;
  • .basis-3xs – flex-basis: var(--container-3xs); /* 16rem (256px) */
  • .basis-2xs – flex-basis: var(--container-2xs); /* 18rem (288px) */
  • .basis-xs – flex-basis: var(--container-xs); /* 20rem (320px) */
  • .basis-sm – flex-basis: var(--container-sm); /* 24rem (384px) */
  • .basis-md – flex-basis: var(--container-md); /* 28rem (448px) */
  • .basis-lg – flex-basis: var(--container-lg); /* 32rem (512px) */
  • .basis-xl – flex-basis: var(--container-xl); /* 36rem (576px) */
  • .basis-2xl – flex-basis: var(--container-2xl); /* 42rem (672px) */
  • .basis-3xl – flex-basis: var(--container-3xl); /* 48rem (768px) */
  • .basis-4xl – flex-basis: var(--container-4xl); /* 56rem (896px) */
  • .basis-5xl – flex-basis: var(--container-5xl); /* 64rem (1024px) */
  • .basis-6xl – flex-basis: var(--container-6xl); /* 72rem (1152px) */
  • .basis-7xl – flex-basis: var(--container-7xl); /* 80rem (1280px) */
  • .basis-(<custom-property>) – flex-basis: var(<custom-property>);
  • .basis-[<value>] – flex-basis: <value>;

flex-direction

(Docs: Tailwind Docs - 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;

flex-wrap

(Docs: Tailwind Docs - flex-wrap)

Utilities for controlling how flex items wrap.

  • .flex-nowrap – flex-wrap: nowrap;
  • .flex-wrap – flex-wrap: wrap;
  • .flex-wrap-reverse – flex-wrap: wrap-reverse;

flex

(Docs: Tailwind Docs - flex)

Utilities for controlling how flex items both grow and shrink.

  • .flex-<number> – flex: <number>;
  • .flex-<fraction> – flex: calc(<fraction> * 100%);
  • .flex-auto – flex: 1 1 auto;
  • .flex-initial – flex: 0 1 auto;
  • .flex-none – flex: none;
  • .flex-(<custom-property>) – flex: var(<custom-property>);
  • .flex-[<value>] – flex: <value>;

flex-grow

(Docs: Tailwind Docs - flex-grow)

Utilities for controlling how flex items grow.

  • .grow – flex-grow: 1;
  • .grow-<number> – flex-grow: <number>;
  • .grow-[<value>] – flex-grow: <value>;
  • .grow-(<custom-property>) – flex-grow: var(<custom-property>);

flex-shrink

(Docs: Tailwind Docs - flex-shrink)

Utilities for controlling how flex items shrink.

  • .shrink – flex-shrink: 1;
  • .shrink-<number> – flex-shrink: <number>;
  • .shrink-[<value>] – flex-shrink: <value>;
  • .shrink-(<custom-property>) – flex-shrink: var(<custom-property>);

order

(Docs: Tailwind Docs - order)

Utilities for controlling the order of flex and grid items.

  • .order-<number> – order: <number>;
  • .-order-<number> – order: calc(<number> * -1);
  • .order-first – order: calc(-infinity); (Places item first)
  • .order-last – order: calc(infinity); (Places item last)
  • .order-none – order: 0;
  • .order-(<custom-property>) – order: var(<custom-property>);
  • .order-[<value>] – order: <value>;

grid-template-columns

(Docs: Tailwind Docs - grid-template-columns)

Utilities for specifying the columns in a grid layout.

  • .grid-cols-<number> – grid-template-columns: repeat(<number>, minmax(0, 1fr));
  • .grid-cols-none – grid-template-columns: none;
  • .grid-cols-subgrid – grid-template-columns: subgrid;
  • .grid-cols-[<value>] – grid-template-columns: <value>;
  • .grid-cols-(<custom-property>) – grid-template-columns: var(<custom-property>);

grid-column

(Docs: Tailwind Docs - grid-column)

Utilities for controlling how elements are sized and placed across grid columns.

  • .col-span-<number> – grid-column: span <number> / span <number>;
  • .col-span-full – grid-column: 1 / -1; (spans full grid width)
  • .col-span-(<custom-property>) – grid-column: span var(<custom-property>) / span var(<custom-property>);
  • .col-span-[<value>] – grid-column: span <value> / span <value>;
  • .col-start-<number> – grid-column-start: <number>;
  • .-col-start-<number> – grid-column-start: calc(<number> * -1); (negative index from end)
  • .col-start-auto – grid-column-start: auto;
  • .col-start-(<custom-property>) – grid-column-start: var(<custom-property>);
  • .col-start-[<value>] – grid-column-start: <value>;
  • .col-end-<number> – grid-column-end: <number>;
  • .-col-end-<number> – grid-column-end: calc(<number> * -1);
  • .col-end-auto – grid-column-end: auto;
  • .col-end-(<custom-property>) – grid-column-end: var(<custom-property>);
  • .col-end-[<value>] – grid-column-end: <value>;
  • .col-auto – grid-column: auto;
  • .col-<number> – grid-column: <number>; (assigns a specific grid line)
  • .-col-<number> – grid-column: calc(<number> * -1); (negative grid line from end)
  • .col-(<custom-property>) – grid-column: var(<custom-property>);
  • .col-[<value>] – grid-column: <value>;

grid-template-rows

(Docs: Tailwind Docs - grid-template-rows)

Utilities for specifying the rows in a grid layout.

  • .grid-rows-<number> – grid-template-rows: repeat(<number>, minmax(0, 1fr));
  • .grid-rows-none – grid-template-rows: none;
  • .grid-rows-subgrid – grid-template-rows: subgrid;
  • .grid-rows-[<value>] – grid-template-rows: <value>;
  • .grid-rows-(<custom-property>) – grid-template-rows: var(<custom-property>);

grid-row

(Docs: Tailwind Docs - grid-row)

Utilities for controlling how elements are sized and placed across grid rows.

  • .row-span-<number> – grid-row: span <number> / span <number>;
  • .row-span-full – grid-row: 1 / -1;
  • .row-span-(<custom-property>) – grid-row: span var(<custom-property>) / span var(<custom-property>);
  • .row-span-[<value>] – grid-row: span <value> / span <value>;
  • .row-start-<number> – grid-row-start: <number>;
  • .-row-start-<number> – grid-row-start: calc(<number> * -1);
  • .row-start-auto – grid-row-start: auto;
  • .row-start-(<custom-property>) – grid-row-start: var(<custom-property>);
  • .row-start-[<value>] – grid-row-start: <value>;
  • .row-end-<number> – grid-row-end: <number>;
  • .-row-end-<number> – grid-row-end: calc(<number> * -1);
  • .row-end-auto – grid-row-end: auto;
  • .row-end-(<custom-property>) – grid-row-end: var(<custom-property>);
  • .row-end-[<value>] – grid-row-end: <value>;
  • .row-auto – grid-row: auto;
  • .row-<number> – grid-row: <number>;
  • .-row-<number> – grid-row: calc(<number> * -1);
  • .row-(<custom-property>) – grid-row: var(<custom-property>);
  • .row-[<value>] – grid-row: <value>;

grid-auto-flow

(Docs: Tailwind Docs - 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;

grid-auto-columns

(Docs: Tailwind Docs - 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);
  • .auto-cols-(<custom-property>) – grid-auto-columns: var(<custom-property>);
  • .auto-cols-[<value>] – grid-auto-columns: <value>;

grid-auto-rows

(Docs: Tailwind Docs - 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);
  • .auto-rows-(<custom-property>) – grid-auto-rows: var(<custom-property>);
  • .auto-rows-[<value>] – grid-auto-rows: <value>;

gap

(Docs: Tailwind Docs - gap)

Utilities for controlling gutters between grid and flexbox items.

  • .gap-<number> – gap: calc(var(--spacing) * <number>);
  • .gap-(<custom-property>) – gap: var(<custom-property>);
  • .gap-[<value>] – gap: <value>;
  • .gap-x-<number> – column-gap: calc(var(--spacing) * <number>);
  • .gap-x-(<custom-property>) – column-gap: var(<custom-property>);
  • .gap-x-[<value>] – column-gap: <value>;
  • .gap-y-<number> – row-gap: calc(var(--spacing) * <number>);
  • .gap-y-(<custom-property>) – row-gap: var(<custom-property>);
  • .gap-y-[<value>] – row-gap: <value>;

justify-content

(Docs: Tailwind Docs - justify-content)

Utilities for controlling how flex and grid items are positioned along a container’s main axis.

  • .justify-start – justify-content: flex-start;
  • .justify-end – justify-content: flex-end;
  • .justify-end-safe – justify-content: safe flex-end;
  • .justify-center – justify-content: center;
  • .justify-center-safe – justify-content: safe 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-baseline – justify-content: baseline;
  • .justify-normal – justify-content: normal;

justify-items

(Docs: Tailwind Docs - 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-end-safe – justify-items: safe end;
  • .justify-items-center – justify-items: center;
  • .justify-items-center-safe – justify-items: safe center;
  • .justify-items-stretch – justify-items: stretch;
  • .justify-items-normal – justify-items: normal;

justify-self

(Docs: Tailwind Docs - 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-center – justify-self: center;
  • .justify-self-center-safe – justify-self: safe center;
  • .justify-self-end – justify-self: end;
  • .justify-self-end-safe – justify-self: safe end;
  • .justify-self-stretch – justify-self: stretch;

align-content

(Docs: Tailwind Docs - align-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;

align-items

(Docs: Tailwind Docs - align-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-end-safe – align-items: safe flex-end;
  • .items-center – align-items: center;
  • .items-center-safe – align-items: safe center;
  • .items-baseline – align-items: baseline;
  • .items-baseline-last – align-items: last baseline;
  • .items-stretch – align-items: stretch;

align-self

(Docs: Tailwind Docs - 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-end-safe – align-self: safe flex-end;
  • .self-center – align-self: center;
  • .self-center-safe – align-self: safe center;
  • .self-stretch – align-self: stretch;
  • .self-baseline – align-self: baseline;
  • .self-baseline – align-self: last baseline;

place-content

(Docs: Tailwind Docs - place-content)

Utilities for controlling how content is justified and aligned at the same time (shorthand for align-content and justify-content combined).

  • .place-content-center – place-content: center;
  • .place-content-center-safe – place-content: safe center;
  • .place-content-start – place-content: start;
  • .place-content-end – place-content: end;
  • .place-content-end-safe – place-content: safe 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

(Docs: Tailwind Docs - place-items)

Utilities for controlling how items are justified and aligned at the same time (shorthand for align-items and justify-items).

  • .place-items-start – place-items: start;
  • .place-items-end – place-items: end;
  • .place-items-end-safe – place-items: safe end;
  • .place-items-center – place-items: center;
  • .place-items-center-safe – place-items: safe center;
  • .place-items-baseline – place-items: baseline;
  • .place-items-stretch – place-items: stretch;

place-self

(Docs: Tailwind Docs - place-self)

Utilities for controlling how an individual item is justified and aligned at the same time (shorthand for align-self and justify-self).

  • .place-self-auto – place-self: auto;
  • .place-self-start – place-self: start;
  • .place-self-end – place-self: end;
  • .place-self-end-safe – place-self: safe end;
  • .place-self-center – place-self: center;
  • .place-self-center-safe – place-self: safe center;
  • .place-self-stretch – place-self: stretch;

(… Additional categories for Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, etc. with all utility classes follow in the same structured format …)

/Michael Andreuzza