← Back to all blog posts

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.

Published on July 31, 2025 by Michael Andreuzza

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

Did you like this post? Please share it with your friends!