Tailwind CSS cheat sheet

557 Tailwind CSS v4 classes and the exact CSS each one produces. Search by class name or by CSS property — type padding, flex or shadow. Tap a class to copy it.

557 classes

Layout

display: block;

display: inline-block;

display: inline;

display: flex;

display: inline-flex;

display: grid;

display: inline-grid;

display: contents;

display: flow-root;

display: table;

display: none;

position: static;

position: relative;

position: absolute;

position: fixed;

position: sticky;

inset: 0px;

inset-inline: 0px;

inset-block: 0px;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

top: 1rem; /* 16px */

top: -1rem; /* -16px */

top: 50%;

left: 50%;

top: 100%;

z-index: 0;

z-index: 10;

z-index: 20;

z-index: 30;

z-index: 40;

z-index: 50;

z-index: auto;

z-index: -10;

overflow: auto;

overflow: hidden;

overflow: clip;

overflow: visible;

overflow: scroll;

overflow-x: auto;

overflow-y: auto;

overflow-x: hidden;

visibility: visible;

visibility: hidden;

visibility: collapse;

float: left;

float: right;

float: none;

clear: both;

box-sizing: border-box;

box-sizing: content-box;

isolation: isolate;

aspect-ratio: 1 / 1;

aspect-ratio: 16 / 9;

aspect-ratio: auto;

aspect-ratio: 3/2;

object-fit: contain;

object-fit: cover;

object-fit: fill;

object-fit: none;

object-position: center;

object-position: top;

columns: 2;

columns: 3;

width: 100%;
@media (width >= 40rem) {
  max-width: 40rem; /* 640px */
}
@media (width >= 48rem) {
  max-width: 48rem; /* 768px */
}
@media (width >= 64rem) {
  max-width: 64rem; /* 1024px */
}
@media (width >= 80rem) {
  max-width: 80rem; /* 1280px */
}
@media (width >= 96rem) {
  max-width: 96rem; /* 1536px */
}

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;

position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;

Flexbox

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-wrap: nowrap;

flex: 1;

flex: auto;

flex: 0 auto;

flex: none;

flex-grow: 1;

flex-grow: 0;

flex-shrink: 1;

flex-shrink: 0;

flex-basis: 0px;

flex-basis: 100%;

flex-basis: 50%;

flex-basis: calc(1 / 3 * 100%);

flex-basis: 16rem; /* 256px */

order: 1;

order: -9999;

order: 9999;

order: 0;

Grid

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

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

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

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

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

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

grid-template-columns: none;

grid-template-columns: subgrid;

grid-column: span 1 / span 1;

grid-column: span 2 / span 2;

grid-column: span 3 / span 3;

grid-column: span 6 / span 6;

grid-column: 1 / -1;

grid-column-start: 2;

grid-column-end: 3;

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

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

grid-row: span 2 / span 2;

grid-row: 1 / -1;

grid-row-start: 1;

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow: dense;

grid-auto-columns: minmax(0, 1fr);

grid-auto-rows: min-content;

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

Alignment and gap

gap: 0px;

gap: 0.25rem; /* 4px */

gap: 0.5rem; /* 8px */

gap: 0.75rem; /* 12px */

gap: 1rem; /* 16px */

gap: 1.5rem; /* 24px */

gap: 2rem; /* 32px */

gap: 3rem; /* 48px */

column-gap: 1rem; /* 16px */

row-gap: 0.5rem; /* 8px */

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

justify-content: stretch;

justify-items: center;

justify-self: flex-end;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

align-content: flex-start;

align-content: center;

align-content: space-between;

align-self: auto;

align-self: flex-start;

align-self: center;

align-self: flex-end;

align-self: stretch;

place-content: center;

place-items: center;

place-self: center;

Padding

padding: 0px;

padding: 1px;

padding: 0.125rem; /* 2px */

padding: 0.25rem; /* 4px */

padding: 0.5rem; /* 8px */

padding: 0.75rem; /* 12px */

padding: 1rem; /* 16px */

padding: 1.25rem; /* 20px */

padding: 1.5rem; /* 24px */

padding: 2rem; /* 32px */

padding: 2.5rem; /* 40px */

padding: 3rem; /* 48px */

padding: 4rem; /* 64px */

padding: 5rem; /* 80px */

padding: 6rem; /* 96px */

padding: 8rem; /* 128px */

padding: 16rem; /* 256px */

padding-inline: 0.5rem; /* 8px */

padding-inline: 1rem; /* 16px */

padding-inline: 1.5rem; /* 24px */

padding-inline: 2rem; /* 32px */

padding-block: 0.25rem; /* 4px */

padding-block: 0.5rem; /* 8px */

padding-block: 1rem; /* 16px */

padding-block: 2rem; /* 32px */

padding-top: 1rem; /* 16px */

padding-right: 1rem; /* 16px */

padding-bottom: 1rem; /* 16px */

padding-left: 1rem; /* 16px */

padding-inline-start: 1rem; /* 16px */

padding-inline-end: 1rem; /* 16px */

Margin

margin: 0px;

margin: 0.25rem; /* 4px */

margin: 0.5rem; /* 8px */

margin: 1rem; /* 16px */

margin: 2rem; /* 32px */

margin: auto;

margin-inline: auto;

margin-block: 1rem; /* 16px */

margin-inline: 1rem; /* 16px */

margin-top: 1rem; /* 16px */

margin-right: 1rem; /* 16px */

margin-bottom: 1rem; /* 16px */

margin-left: 1rem; /* 16px */

margin-inline-start: 1rem; /* 16px */

margin-inline-end: 1rem; /* 16px */

margin-left: auto;

margin-top: auto;

margin: -0.5rem; /* -8px */

margin-top: -1rem; /* -16px */

margin-inline: -1rem; /* -16px */

:where(.space-x-4 > :not(:last-child)) {
  margin-inline-start: 0;
  margin-inline-end: 1rem; /* 16px */
}

:where(.space-y-4 > :not(:last-child)) {
  margin-block-start: 0;
  margin-block-end: 1rem; /* 16px */
}

Width and height

width: 0px;

width: 1rem; /* 16px */

width: 2rem; /* 32px */

width: 4rem; /* 64px */

width: 8rem; /* 128px */

width: 16rem; /* 256px */

width: 24rem; /* 384px */

width: auto;

width: 100%;

width: 100vw;

width: 100dvw;

width: 50%;

width: calc(1 / 3 * 100%);

width: calc(2 / 3 * 100%);

width: 25%;

width: 75%;

width: fit-content;

width: min-content;

width: max-content;

width: 1px;

min-width: 0px;

min-width: 100%;

max-width: 20rem; /* 320px */

max-width: 24rem; /* 384px */

max-width: 28rem; /* 448px */

max-width: 32rem; /* 512px */

max-width: 36rem; /* 576px */

max-width: 42rem; /* 672px */

max-width: 48rem; /* 768px */

max-width: 56rem; /* 896px */

max-width: 64rem; /* 1024px */

max-width: 72rem; /* 1152px */

max-width: 80rem; /* 1280px */

max-width: 100%;

max-width: 65ch;

max-width: none;

max-width: 48rem; /* 768px */

height: 0px;

height: 1rem; /* 16px */

height: 2rem; /* 32px */

height: 4rem; /* 64px */

height: 8rem; /* 128px */

height: 16rem; /* 256px */

height: auto;

height: 100%;

height: 100vh;

height: 100dvh;

height: 100svh;

height: fit-content;

height: 1px;

min-height: 0px;

min-height: 100%;

min-height: 100vh;

min-height: 100dvh;

max-height: 100%;

max-height: 100vh;

max-height: 16rem; /* 256px */

width: 1rem; /* 16px */
height: 1rem; /* 16px */

width: 2rem; /* 32px */
height: 2rem; /* 32px */

width: 100%;
height: 100%;

Typography

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

font-size: 0.75rem; /* 12px */
line-height: calc(1 / 0.75);

font-size: 0.875rem; /* 14px */
line-height: calc(1.25 / 0.875);

font-size: 1rem; /* 16px */
line-height: 1.5;

font-size: 1.125rem; /* 18px */
line-height: calc(1.75 / 1.125);

font-size: 1.25rem; /* 20px */
line-height: 1.4;

font-size: 1.5rem; /* 24px */
line-height: calc(2 / 1.5);

font-size: 1.875rem; /* 30px */
line-height: 1.2;

font-size: 2.25rem; /* 36px */
line-height: calc(2.5 / 2.25);

font-size: 3rem; /* 48px */
line-height: 1;

font-size: 3.75rem; /* 60px */
line-height: 1;

font-size: 4.5rem; /* 72px */
line-height: 1;

font-size: 6rem; /* 96px */
line-height: 1;

font-size: 8rem; /* 128px */
line-height: 1;

font-weight: 100;

font-weight: 200;

font-weight: 300;

font-weight: 400;

font-weight: 500;

font-weight: 600;

font-weight: 700;

font-weight: 800;

font-weight: 900;

font-style: italic;

font-style: normal;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

font-variant-numeric: tabular-nums;

line-height: 1;

line-height: 1.25;

line-height: 1.375;

line-height: 1.5;

line-height: 1.625;

line-height: 2;

line-height: 1.5rem; /* 24px */

letter-spacing: -0.05em;

letter-spacing: -0.025em;

letter-spacing: 0em;

letter-spacing: 0.025em;

letter-spacing: 0.05em;

letter-spacing: 0.1em;

text-align: left;

text-align: center;

text-align: right;

text-align: justify;

text-align: start;

text-align: end;

color: #fff;

color: #000;

color: oklch(55.1% 0.027 264.364);

color: oklch(21% 0.034 264.665);

color: oklch(54.6% 0.245 262.881);

color: oklch(57.7% 0.245 27.325);

color: inherit;

color: currentcolor;

color: transparent;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: none;

text-decoration-thickness: 2px;

text-decoration-style: dotted;

text-underline-offset: 4px;

text-transform: uppercase;

text-transform: lowercase;

text-transform: capitalize;

text-transform: none;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflow: ellipsis;

text-overflow: clip;

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: unset;

white-space: normal;

white-space: nowrap;

white-space: pre;

white-space: pre-line;

white-space: pre-wrap;

overflow-wrap: break-word;

word-break: break-all;

word-break: keep-all;

text-wrap: wrap;

text-wrap: nowrap;

text-wrap: balance;

text-wrap: pretty;

text-indent: 1rem; /* 16px */

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

list-style-type: none;

list-style-type: disc;

list-style-type: decimal;

list-style-position: inside;

list-style-position: outside;

Backgrounds

background-color: #fff;

background-color: #000;

background-color: transparent;

background-color: oklch(96.7% 0.003 264.542);

background-color: oklch(62.3% 0.214 259.815);

background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
  background-color: color-mix(in oklab, oklch(62.3% 0.214 259.815) 50%, transparent);
}

background-color: currentcolor;

background-size: cover;

background-size: contain;

background-size: auto;

background-position: center;

background-position: top;

background-repeat: no-repeat;

background-repeat: repeat;

background-repeat: repeat-x;

background-attachment: fixed;

background-attachment: local;

background-clip: text;

background-clip: padding-box;

background-image: none;

Borders

border-style: solid;
border-width: 1px;

border-style: solid;
border-width: 0px;

border-style: solid;
border-width: 2px;

border-style: solid;
border-width: 4px;

border-style: solid;
border-width: 8px;

border-inline-style: solid;
border-inline-width: 1px;

border-block-style: solid;
border-block-width: 1px;

border-top-style: solid;
border-top-width: 1px;

border-right-style: solid;
border-right-width: 1px;

border-bottom-style: solid;
border-bottom-width: 1px;

border-left-style: solid;
border-left-width: 1px;

border-top-style: solid;
border-top-width: 2px;

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: double;

border-style: none;

border-color: oklch(92.8% 0.006 264.531);

border-color: oklch(62.3% 0.214 259.815);

border-color: transparent;

border-color: currentcolor;

border-radius: 0;

border-radius: 0.125rem; /* 2px */

border-radius: 0.25rem; /* 4px */

border-radius: 0.375rem; /* 6px */

border-radius: 0.5rem; /* 8px */

border-radius: 0.75rem; /* 12px */

border-radius: 1rem; /* 16px */

border-radius: 1.5rem; /* 24px */

border-radius: 2rem; /* 32px */

border-radius: calc(infinity * 1px);

border-top-left-radius: 0.5rem; /* 8px */
border-top-right-radius: 0.5rem; /* 8px */

border-bottom-right-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */

border-top-left-radius: 0.5rem; /* 8px */
border-bottom-left-radius: 0.5rem; /* 8px */

border-top-right-radius: 0.5rem; /* 8px */
border-bottom-right-radius: 0.5rem; /* 8px */

border-top-left-radius: 0.5rem; /* 8px */

:where(.divide-x > :not(:last-child)) {
  border-inline-style: solid;
  border-inline-start-width: 0;
  border-inline-end-width: 1px;
}

:where(.divide-y > :not(:last-child)) {
  border-bottom-style: solid;
  border-top-style: solid;
  border-top-width: 0;
  border-bottom-width: 1px;
}

:where(.divide-gray-200 > :not(:last-child)) {
  border-color: oklch(92.8% 0.006 264.531);
}

outline-style: solid;
outline-width: 1px;

outline-style: solid;
outline-width: 2px;

outline-style: none;

outline-style: none;
@media (forced-colors: active) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

outline-style: dashed;

outline-offset: 2px;

outline-color: oklch(62.3% 0.214 259.815);

box-shadow: 0 0 0 1px currentcolor;

box-shadow: 0 0 0 0 currentcolor;

box-shadow: 0 0 0 1px currentcolor;

box-shadow: 0 0 0 2px currentcolor;

box-shadow: 0 0 0 4px currentcolor;

--tw-ring-inset: inset;

--tw-ring-color: oklch(62.3% 0.214 259.815);

Effects

box-shadow: 0 1px rgb(0 0 0 / 0.05);

box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

box-shadow: 0 0 #0000;

box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);

opacity: 0%;

opacity: 25%;

opacity: 50%;

opacity: 75%;

opacity: 100%;

mix-blend-mode: multiply;

mix-blend-mode: screen;

background-blend-mode: multiply;

Filters

filter: ;

filter: blur(4px);

filter: blur(8px);

filter: blur(12px);

filter: blur(16px);

filter: blur(24px);

filter: brightness(50%);

filter: brightness(125%);

filter: contrast(125%);

filter: grayscale(100%);

filter: grayscale(0%);

filter: invert(100%);

filter: sepia(100%);

filter: saturate(150%);

filter: hue-rotate(90deg);

filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12));

-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);

Transitions and animation

transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: transform, translate, scale, rotate;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: none;

transition-duration: 75ms;

transition-duration: 150ms;

transition-duration: 200ms;

transition-duration: 300ms;

transition-duration: 500ms;

transition-duration: 1000ms;

transition-timing-function: linear;

transition-timing-function: cubic-bezier(0.4, 0, 1, 1);

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

transition-delay: 150ms;

transition-delay: 300ms;

animation: spin 1s linear infinite;

animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

animation: bounce 1s infinite;

animation: none;

Transforms

scale: 50% 50%;

scale: 90% 90%;

scale: 95% 95%;

scale: 100% 100%;

scale: 105% 105%;

scale: 110% 110%;

scale: 150% 150%;

scale: 150% 1;

scale: -100% 1;

rotate: 45deg;

rotate: 90deg;

rotate: 180deg;

rotate: calc(45deg * -1);

translate: 1rem 0; /* 16px */

translate: 0 1rem; /* 16px */

translate: -50% 0;

translate: 0 -50%;

translate: 100% 0;

translate: 0 1px;

transform: skewX(12deg);

transform: skewY(6deg);

transform-origin: center;

transform-origin: 0 0;

transform-origin: bottom;

Interactivity

cursor: pointer;

cursor: default;

cursor: wait;

cursor: text;

cursor: move;

cursor: not-allowed;

cursor: grab;

pointer-events: none;

pointer-events: auto;

-webkit-user-select: none;
user-select: none;

-webkit-user-select: text;
user-select: text;

-webkit-user-select: all;
user-select: all;

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

appearance: none;

scroll-behavior: smooth;

scroll-margin-top: 4rem; /* 64px */

scroll-snap-type: x proximity;

--tw-scroll-snap-strictness: mandatory;

scroll-snap-align: center;

touch-action: none;

touch-action: pan-y;

accent-color: oklch(62.3% 0.214 259.815);

caret-color: oklch(62.3% 0.214 259.815);

will-change: transform;

Tables and SVG

table-layout: auto;

table-layout: fixed;

border-collapse: collapse;

border-collapse: separate;

border-spacing: 0.5rem 0.5rem; /* 8px 8px */

caption-side: bottom;

fill: currentcolor;

stroke: currentcolor;

stroke-width: 2;

No class matches. Try a CSS property name such as margin or border-radius.

Breakpoints

Put a breakpoint in front of any class to apply it from that screen width up: md:flex is display: flex on screens 768px and wider. Classes without a prefix apply at every width, so style for phones first and add prefixes for bigger screens.

Prefix	Media query	From
`sm:`	`@media (width >= 40rem)`	640px
`md:`	`@media (width >= 48rem)`	768px
`lg:`	`@media (width >= 64rem)`	1024px
`xl:`	`@media (width >= 80rem)`	1280px
`2xl:`	`@media (width >= 96rem)`	1536px

To style only below a width, use max-md: (and so on), or combine them: md:max-lg:flex.

Variants

A variant applies a class only in a state, such as on hover or in dark mode. This is the CSS Tailwind 4.3.3 wraps around block for each one.

@media (hover: hover) {
  .hover\:block:hover {
    display: block;
  }
}

.focus\:block:focus {
  display: block;
}

.focus-visible\:block:focus-visible {
  display: block;
}

.focus-within\:block:focus-within {
  display: block;
}

.active\:block:active {
  display: block;
}

.visited\:block:visited {
  display: block;
}

.disabled\:block:disabled {
  display: block;
}

.checked\:block:checked {
  display: block;
}

.required\:block:required {
  display: block;
}

.invalid\:block:invalid {
  display: block;
}

.first\:block:first-child {
  display: block;
}

.last\:block:last-child {
  display: block;
}

.odd\:block:nth-child(odd) {
  display: block;
}

.even\:block:nth-child(even) {
  display: block;
}

.empty\:block:empty {
  display: block;
}

@media (hover: hover) {
  .group-hover\:block:is(:where(.group):hover *) {
    display: block;
  }
}

.peer-checked\:block:is(:where(.peer):checked ~ *) {
  display: block;
}

.placeholder\:block::placeholder {
  display: block;
}

.before\:block::before {
  content: var(--tw-content);
  display: block;
}

.after\:block::after {
  content: var(--tw-content);
  display: block;
}

.file\:block::file-selector-button {
  display: block;
}

.marker\:block ::marker {
  display: block;
}
.marker\:block::marker {
  display: block;
}
.marker\:block ::-webkit-details-marker {
  display: block;
}
.marker\:block::-webkit-details-marker {
  display: block;
}

.selection\:block ::selection {
  display: block;
}
.selection\:block::selection {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .dark\:block {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:block {
    display: block;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:block {
    display: block;
  }
}

@media print {
  .print\:block {
    display: block;
  }
}

@media (orientation: portrait) {
  .portrait\:block {
    display: block;
  }
}

@media (orientation: landscape) {
  .landscape\:block {
    display: block;
  }
}

.aria-expanded\:block[aria-expanded="true"] {
  display: block;
}

.open\:block:is([open], :popover-open, :open) {
  display: block;
}

.rtl\:block:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
  display: block;
}

@starting-style  {
  .starting\:block {
    display: block;
  }
}

How to read this cheat sheet

Values are resolved. Tailwind v4 writes most values as theme variables — p-4 is really padding: calc(var(--spacing) * 4). We show the value that works out to, 1rem, with pixels next to it at the browser default of 16px per rem.
One spacing step is 0.25rem (4px). So p-1 is 4px, p-4 is 16px and p-10 is 40px. In v4 any whole number works, not only the steps listed here: p-13 is 52px.
Colours are OKLCH in v4. This page shows a few; see every shade with HEX and RGB values on Tailwind CSS colors.
Not on the list? Any value can go in square brackets — w-[37px], bg-[#4f46e5]. Paste existing CSS into the CSS to Tailwind converter to get the classes.

How we check it

Every line of CSS here is generated by the Tailwind CSS 4.3.3 compiler, not typed by hand. We then test each of the 557 classes in Chrome: one element gets the real Tailwind class, another gets only the CSS this page prints. Their computed styles — and their children's, for classes like space-x-4 — are identical at phone and desktop widths. All 127 pixel values were checked the same way.

Questions

Is this for Tailwind v3 or v4?

v4. Most class names are the same in v3, but some changed: v4's shadow-sm is v3's shadow, rounded-sm is v3's rounded, blur-sm is v3's blur, and outline-hidden is v3's outline-none. In v4, ring is 1px wide and uses the current text colour; in v3 it was 3px and blue.

Why does text-sm also set line-height?

Each font-size class in Tailwind comes with a matching line height. Add a leading-* class to override it, or write text-sm/6 to set both at once.

What does :where(…) mean in space-x-4?

Those classes style the element's children, not the element itself. :where() keeps the selector's specificity at zero, so a class on a child can still override it. For new layouts, gap-4 on a flex or grid container does the same job more simply.