Tailwind CSS v4 Cheat Sheet (Searchable) | How-to Guide

By the We.Inc editorial team · Editorial policy

A searchable Tailwind CSS v4 cheat sheet: type any class or plain word and see the exact CSS v4 generates, from var(--spacing) multiples to OKLCH color tokens. It also covers @theme tokens, breakpoints, container queries, live flex and grid boxes, the full color palette, dark mode, and v3 to v4 renames.

Updated October 13, 2026

This sheet covers Tailwind CSS v4 (v4.3 is the current release at the time of writing, October 2026). For each class it shows the CSS that v4 actually writes, which matters because v4 changed how values are produced: spacing is a multiple of one --spacing variable, colors are --color-* variables defined in OKLCH, and sizes such as radius, shadow and text come from named theme variables. Type in the box to filter. Search works on class names, the CSS they output, and plain words such as "center", "gradient" or "sticky".

Search every utility

Notes on reading the table: calc(var(--spacing) * 4) is 1rem because the default --spacing is 0.25rem. Change that one variable in @theme and every padding, margin, gap, width and height that uses the number scale changes with it. Where the generated CSS is long (gradients, rings, transitions), the table shows a simplified version and says so.

How v4 turns a class into a value

There are four ways to give a utility a value in v4, and knowing which one you are using explains most surprises:

• A number on the spacing scale: p-4, w-64, gap-3. Any whole number works, and so do quarter steps such as p-2.5, without config. The value is calc(var(--spacing) * n).
• A named theme value: rounded-lg, shadow-md, text-xl, max-w-md. Each reads a variable such as --radius-lg or --container-md.
• An arbitrary value in square brackets: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Underscores stand in for spaces.
• A CSS variable in parentheses: bg-(--brand) is v4 shorthand for bg-[var(--brand)]. In v3 you wrote bg-[--brand].

Fractions such as w-1/2 become calc(1/2 * 100%), and an opacity suffix such as bg-black/50 becomes a color-mix() with transparent, so it works with any color format.

@theme tokens (the v4 replacement for tailwind.config.js)

In v4 you configure the design system in CSS. Variables declared inside @theme become both CSS custom properties on :root and the source for utility classes. The prefix of the variable decides which utilities it feeds:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Namespace	Feeds	Example
--color-*	every color utility (bg, text, border, fill, ring, shadow color...)	bg-red-500
--spacing	padding, margin, gap, width, height, inset, translate	px-4
--font-*	font family	font-sans
--text-*	font size (plus optional --text-*--line-height)	text-xl
--font-weight-*	font weight	font-bold
--tracking-* / --leading-*	letter spacing / line height	tracking-wide
--breakpoint-*	responsive variants	sm:*
--container-*	container query variants and max-w-*	@sm:*, max-w-md
--radius-*	border radius	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	shadows	shadow-md
--blur-*	blur and backdrop blur	blur-md
--ease-* / --animate-*	timing functions / animations	ease-out, animate-spin
--perspective-* / --aspect-*	3D perspective / aspect ratio	perspective-near, aspect-video

To drop a whole default namespace, set it to initial first, for example --color-*: initial;, then declare only your own colors. If you still have a JavaScript config, v4 can load it with @config "./tailwind.config.js";, but the corePlugins, safelist and separator options are not supported.

Breakpoints

Breakpoints are mobile first: an unprefixed class applies at every width, and md:flex applies from 48rem up. v4 writes them with the range syntax width >= ....

Prefix	Min width	CSS	Below it (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Stack them to target a range: md:max-xl:flex applies only from 48rem up to (not including) 80rem. For a one-off breakpoint use min-[900px]:grid or max-[600px]:hidden. Add or change breakpoints with --breakpoint-* in @theme, and keep them all in rem so they sort correctly.

Container queries

Container queries are built into v4 (in v3 they needed a plugin). Mark a parent with @container, then style children with @sm:, @md: and so on. They react to the parent's width rather than the window, which is what you want for a card that appears both in a sidebar and in a wide main column.

<div>
  <article>
    <img src="..." alt="">
    <div>...</div>
  </article>
</div>

Variant	Container width	Variant	Container width
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Each one compiles to @container (width >= ...). Use @max-md: for "below", stack @sm:@max-md: for a range, name containers with @container/sidebar and target them with @md/sidebar:, and use arbitrary sizes such as @min-[475px]:. Note the container sizes are not the same numbers as the breakpoints: @md is 28rem while md: is 48rem.

Flex and grid quick reference

Pick a layout below and watch the boxes move. The class string updates as you click, so you can copy it straight into your markup.

The patterns you will reach for most often:

Goal	Classes
Responsive card grid without breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Sidebar plus content	grid md:grid-cols-[16rem_1fr] gap-8
Footer pinned to the bottom of a short page	flex min-h-dvh flex-col on the wrapper, flex-1 on main
Text that truncates inside a flex row	min-w-0 on the flex child, truncate on the text
Stack on mobile, row on desktop	flex flex-col md:flex-row gap-4
Push the last item to the right	ms-auto (or ml-auto) on that item

Default color palette (OKLCH), click to copy

v4 defines the default palette in OKLCH, which can show more saturated colors on wide-gamut screens. Each swatch below is painted with the exact value from Tailwind's own theme file; click one to copy its oklch() value. The shades run 50 to 950. Palettes marked * (mauve, olive, mist and taupe) were added in v4.2.0, so they are missing in earlier v4 releases. Black and white are #000 and #fff.

Use them as bg-sky-500, text-sky-500/80 or, in your own CSS, var(--color-sky-500). To check whether a pairing is readable, run it through the color contrast checker, and for a custom scale in the same format try the Tailwind color palette generator.

Dark mode in v4

By default dark: follows the operating system through @media (prefers-color-scheme: dark). To drive it from a class or attribute instead (for a manual toggle), override the variant in your CSS with @custom-variant. There is no darkMode config key any more.

/* Class strategy: <html> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div>...</div>

With a manual toggle, set the class before the page paints (a small inline script in <head> that reads the saved choice) so visitors do not see a flash of the wrong theme. A third option is to skip dark: classes entirely: define semantic tokens such as --color-surface in @theme and swap their values under .dark, so one class like bg-surface works in both themes.

v3 to v4: renamed and changed classes

These come from the official upgrade guide. The renames matter most because the old names still exist and quietly produce a different (smaller) result.

v3	v4	Why
shadow-sm	shadow-xs	Scale shifted down one step so every size has a name
shadow	shadow-sm	Same shift
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Same shift
blur-sm / blur	blur-xs / blur-sm	Same shift (also backdrop-blur-*)
rounded-sm	rounded-xs	Same shift
rounded	rounded-sm	Same shift
outline-none	outline-hidden	v4 outline-none now really sets outline-style: none
ring (3px, blue-500)	ring-3 plus a color	Bare ring is now 1px in currentColor
outline outline-2	outline-2	Width utilities now set a solid style themselves
bg-opacity-50 (and text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Removed; use the slash modifier
flex-shrink-0 / flex-grow	shrink-0 / grow	Removed aliases
overflow-ellipsis	text-ellipsis	Removed alias
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Removed aliases
bg-[--brand]	bg-(--brand)	New shorthand for CSS variables
!bg-red-500	bg-red-500!	Important goes at the end (old form deprecated)
first:*:pt-0	*:first:pt-0	Stacked variants now read left to right
tw-flex (prefix)	tw:flex	Prefixes look like a variant and come first

Behavior changes with no rename, which catch people during upgrades:

• Border and divide color: default is now currentColor instead of gray-200, so a bare border looks dark. Add a color such as border-gray-200.
• Hover on touch screens: hover: is wrapped in @media (hover: hover), so a tap no longer triggers sticky hover styles.
• Buttons: Preflight now gives buttons cursor: default like the browser does. Add cursor-pointer if you want the hand.
• space-x / space-y and divide: the selector changed to > :not(:last-child) and the margin moved to the end side. If spacing looks off, switch to flex or grid with gap.
• container: the center and padding options are gone; extend it with @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Gradients: v4 names linear gradients bg-linear-to-r and adds bg-radial and bg-conic.
• Browsers: v4 targets Safari 16.4+, Chrome 111+ and Firefox 128+. If you must support older browsers, the upgrade guide says to stay on v3.4.

The official npx @tailwindcss/upgrade tool handles most renames automatically. Run it on a clean branch and review the diff, since it cannot know which shadow classes you meant to keep looking the same.

Printing this sheet

This page has print styles: the search boxes and buttons are hidden, the tables shrink to a smaller font, and the color grid keeps its swatches together. In most browsers, turn on "Background graphics" in the print dialog or the swatches print blank. If you filtered the table first, only the visible rows print, which is a quick way to make a one-page sheet of just the utilities you use.

The same print: variant works in your own projects: print:hidden on navigation, print:text-black on light text, and print:break-inside-avoid on cards keep printed pages readable.

Related

• CSS button states: hover, focus-visible, active and disabled, in plain CSS and Tailwind.
• Website color schemes for choosing a palette before you map it to tokens.
• CSS grid generator and the component gallery of Tailwind sections you can copy.

Frequently asked questions

Where is tailwind.config.js in Tailwind v4?

v4 is configured in CSS. You import Tailwind with @import "tailwindcss" and declare design tokens inside an @theme block, such as --color-brand-500 or --breakpoint-3xl. A JavaScript config can still be loaded with the @config directive, but the corePlugins, safelist and separator options are not supported.

What are the default Tailwind v4 breakpoints?

sm is 40rem (640px), md is 48rem (768px), lg is 64rem (1024px), xl is 80rem (1280px) and 2xl is 96rem (1536px). They are mobile first, so md:flex applies from 48rem and wider. Use max-md: for styles below a breakpoint and stack them, such as md:max-xl:, for a range.

Why do my shadows and rounded corners look smaller after upgrading to v4?

The shadow, radius and blur scales moved down one step. v3 shadow-sm is v4 shadow-xs, v3 shadow is v4 shadow-sm, v3 rounded-sm is v4 rounded-xs and v3 rounded is v4 rounded-sm. The old names still compile, so nothing errors; they just produce the next size down.

How do I make dark mode use a class instead of the system setting in v4?

Add @custom-variant dark (&:where(.dark, .dark *)); to your CSS. dark: utilities then apply whenever an ancestor has the dark class. Use [data-theme=dark] in the selector instead if you prefer a data attribute.

Does Tailwind v4 need a plugin for container queries?

No. Container queries are built in. Put @container on the parent and use variants such as @sm:, @md: and @max-md: on its children. The container sizes start at @3xs (16rem) and differ from the page breakpoints, for example @md is 28rem.

What does p-4 compile to in Tailwind v4?

padding: calc(var(--spacing) * 4). With the default --spacing of 0.25rem that is 1rem (16px at the default font size). Any whole number works on the spacing scale without configuration, and changing --spacing rescales all of them at once.

More in Guides

• Tailwind CSS Colors: The Full Default Palette
• Tailwind vs Bootstrap: One Section, Built Twice
• Team Page Examples
• Terms of Service vs Privacy Policy
• Thank You Page Examples
• TOML vs YAML: Same Config, Three Formats
• Too Many Redirects: Find the Loop, Then Break It
• TypeScript Classes: Who Can Touch Each Member

Start building

• how to make a website
• AI website builder
• free website builder
• website templates
• website builders by industry

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

• AI Website Builder: Describe a site in plain English; it's live in minutes
• White Label Platform: Your brand, your domain, your margin
• Enterprise: SSO, custom SLAs, and dedicated support
• Developer API: Embed site generation into your SaaS

Who It's For

• For Agencies: Resell under your brand
• For Freelancers: Your own branded builder
• For Hosting Providers: Add a builder to your stack
• For SaaS Platforms: Embed site creation via API
• For Startups
• For Financial Services
• For Healthcare

Features

• Drag & Drop Editor
• Built-in SEO Tools
• Custom Branding
• Client Dashboard
• Reseller Billing (Stripe Connect)

Resources

• Blog
• Help Center
• Free Business Tools
• Free UI Components
• Website Templates
• Template Collections
• Website Examples
• Guides
• Comparisons
• Alternatives
• Best Lists
• Reviews
• Pricing Guides
• Glossary & Guides
• Integrations
• Developers
• Benchmark
• Windows App

Company

• About Us
• Pricing
• Apply to the Partner Program
• Contact
• Careers
• Security
• Privacy Policy
• Terms of Service

View Sitemap