Tailwind CSS Cheat Sheet

What Is a Tailwind CSS Cheat Sheet?

A Tailwind CSS cheat sheet is a grouped reference of utility classes organized by property type, covering layout, spacing, typography, color, and interactivity in one place.

Tailwind CSS uses a utility-first approach where each class maps to a single CSS property and value. There are no pre-built components to override. You build directly in your HTML.

The framework ships with 500+ utilities across every major CSS domain. That number alone explains why a quick-reference cheat sheet exists in the first place.

This reference covers Tailwind CSS v3.x, the current stable release as of 2025. The class naming pattern is consistent throughout: property-value. Examples: text-lg, mt-4, bg-blue-500.

The State of CSS 2025 survey shows 51% of developers actively using Tailwind, making it the most widely adopted CSS framework right now (State of CSS 2025).

Major platforms including Netflix, NASA JPL, Shopify, Cloudflare, and OpenAI's ChatGPT interface all run Tailwind in production.

---

What Are the Layout and Display Utility Classes in Tailwind CSS?

Tailwind's layout and display classes control how elements render, where they sit in the document flow, and how they behave when content overflows.

These are the foundational classes you reach for before anything else. Get display and position wrong and the rest of your styling fights against you.

Display Classes

Class	CSS Output	Use Case
block	display: block	Full-width elements, stacking
inline-block	display: inline-block	Inline with sizing control
flex	display: flex	One-dimensional layouts
grid	display: grid	Two-dimensional layouts
hidden	display: none	Fully removes element from flow

When to use inline-flex: It behaves like flex but keeps the container inline. Useful for button groups that need to sit next to other inline content.

Position Classes

Static is the default. Everything else creates a positioning context.

• relative sets a positioning reference for absolute children

• absolute pulls the element out of document flow, positions to nearest relative parent

• fixed locks the element to the viewport (navbars, modals)

• sticky behaves like relative until a scroll threshold is hit, then acts like fixed

Position classes rarely work in isolation. You almost always pair them with top-*, right-*, bottom-*, or left-* offset classes.

Overflow and Z-Index Classes

Overflow controls what happens when content grows beyond its container.

• overflow-hidden is the most common: clips content and creates a new stacking context

• overflow-auto adds scrollbars only when needed

• overflow-scroll adds scrollbars always, even when content fits

Z-index scale: z-0, z-10, z-20, z-30, z-40, z-50, z-auto. The scale jumps in 10s deliberately, leaving room to add intermediate values without rewriting everything.

overflow-hidden on a parent element also clips any absolute children that extend outside its bounds. Worth knowing before you spend 20 minutes wondering why your dropdown is invisible.

---

What Are the Flexbox Utility Classes in Tailwind CSS?

Tailwind's flexbox classes map directly to CSS flexbox properties. Apply flex to a container, then use the supporting classes to control direction, alignment, and item behavior.

Tailwind is framework-agnostic and integrates with React, Vue, Angular, Next.js, and Svelte, so these flexbox utilities work identically across every front-end development stack (Tailkits, 2025).

Flex Container Classes

Direction and wrapping:

• flex-row / flex-row-reverse: horizontal axis (default is flex-row)

• flex-col / flex-col-reverse: vertical axis

• flex-wrap: lets items wrap to new lines

• flex-nowrap: forces single line (default)

Justify content (main axis alignment):

Class	Behavior
justify-start	Items packed at start
justify-center	Items centered
justify-between	Equal space between items
justify-around	Equal space around items
justify-evenly	Equal space including edges

Align items (cross axis): items-start, items-center, items-end, items-stretch, items-baseline.

items-stretch is the default. It's why flex children fill the container height unless you override it.

Flex Item Classes

Three classes cover most situations:

• flex-1: item grows to fill space, shrinks if needed

• flex-auto: grows and shrinks based on its intrinsic size

• flex-none: fixed size, never grows or shrinks

grow and shrink are the explicit versions. shrink-0 is especially useful for icons or avatars inside a flex row that would otherwise compress on small screens.

---

What Are the Grid Utility Classes in Tailwind CSS?

Tailwind's grid classes give you full CSS Grid control directly in HTML. Unlike Bootstrap's 12-column system (which uses flexbox under the hood), Tailwind uses actual CSS Grid, which means you get real two-dimensional layout control.

Grid Container Classes

Columns: grid-cols-1 through grid-cols-12, plus grid-cols-none.

Most real projects use 2, 3, or 4 columns. The 12-column maximum matches the tailwind.config.js default but can be extended for non-standard layouts.

Rows: grid-rows-1 through grid-rows-6. Less commonly used than columns, but essential for explicit row control in card grids and dashboards.

Gap classes set spacing between grid cells:

• gap-* applies to both row and column gaps

• gap-x-* and gap-y-* set them independently

• Scale matches the spacing system: gap-4 = 16px, gap-8 = 32px

Auto flow controls how items fill cells automatically: grid-flow-row (default), grid-flow-col, grid-flow-dense.

Grid Item Placement Classes

grid-flow-dense is worth knowing. It fills gaps left by large items with smaller ones, which matters for masonry-style layouts.

• col-span-1 through col-span-12: how many columns an item occupies

• col-span-full: item spans all columns in the container

• row-span-*: same logic applied to rows

Vercel uses a 3-column grid layout across several sections of their marketing site, built entirely with Tailwind grid classes.

---

What Are the Spacing Utility Classes in Tailwind CSS?

Spacing in Tailwind covers padding, margin, and the spacing between child elements. The entire system runs on a 4px base unit: spacing-1 = 4px, spacing-4 = 16px, spacing-8 = 32px.

This consistent scale is what makes Tailwind layouts feel visually coherent without a custom design system.

Padding Classes

Padding classes follow a clear pattern: direction prefix plus scale value.

• p-*: all sides

• px-* / py-*: horizontal or vertical axis

• pt-*, pr-*, pb-*, pl-*: individual sides

Scale values run from 0 through 96, plus fractional values like p-0.5 (2px) and p-1.5 (6px).

Most used in production: p-4 (16px), px-6 (24px), py-2 (8px) for buttons, p-0 to strip browser defaults.

Margin Classes

Same pattern as padding, with one important addition: mx-auto centers block elements horizontally. That one class replaces margin: 0 auto in traditional CSS.

Negative margin (-mt-4, -mx-2) pulls elements toward each other. Useful for overlapping card designs and correcting spacing inherited from parent padding.

Space Between Classes

space-x-* and space-y-* apply margin to all children except the last. This avoids the classic "extra margin on the last item" problem without needing :last-child selectors.

space-x-reverse is the companion class for right-to-left flex layouts where the direction is reversed.

---

What Are the Typography Utility Classes in Tailwind CSS?

Tailwind's typography classes handle everything from font size and weight to line height, letter spacing, and text decoration. Together they cover the full range of CSS cheat sheet typography properties without writing a single custom rule.

Font Size and Weight Classes

Font size scale:

Class	Size	Equivalent
text-xs	12px	Caption, labels
text-sm	14px	Secondary text
text-base	16px	Body default
text-lg	18px	Lead paragraphs
text-xl	20px	Subheadings
text-4xl	36px	Page headings
text-9xl	128px	Display / hero

Font weight maps to CSS numeric values: font-thin (100), font-light (300), font-normal (400), font-medium (500), font-semibold (600), font-bold (700), font-black (900).

Text Alignment and Spacing Classes

Alignment: text-left, text-center, text-right, text-justify. These apply text-align directly. Responsive variants work the same way: md:text-center centers text only at medium breakpoints and above.

Line height controls readability:

• leading-none (1.0): tight, used for large display text

• leading-tight (1.25): headings

• leading-normal (1.5): body default

• leading-loose (2.0): airy editorial copy

Letter spacing: tracking-tight to tracking-widest. The tracking-wide class works well for uppercase labels and buttons.

Text Decoration and Transform Classes

State of CSS 2024 data shows 62% of developers use Tailwind, which means these classes are among the most commonly referenced utilities on any team.

Quick reference for common decoration and transform classes:

• underline / line-through / no-underline: text decoration

• uppercase / lowercase / capitalize: text transform

• truncate: clips text with an ellipsis on overflow (sets overflow-hidden, text-overflow: ellipsis, whitespace-nowrap all at once)

• text-wrap / text-nowrap: controls wrapping behavior (added in Tailwind v3.3)

truncate is one of those multi-property shortcuts that comes up constantly in sidebar navigation, table cells, and card titles.

---

What Are the Color and Background Utility Classes in Tailwind CSS?

Tailwind ships with a 22-color palette, each with 11 shades from 50 (near white) to 950 (near black). That gives you 242 named colors before you add a single custom value.

The State of CSS 2024 survey reports 81% developer satisfaction with Tailwind, and the color system is a significant part of why (State of CSS 2024).

Text and Background Color Classes

Color classes follow the pattern {property}-{color}-{shade}.

• Text: text-blue-500, text-gray-900, text-white, text-black

• Background: bg-red-100, bg-emerald-600, bg-transparent, bg-white

The 22 color families: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Practical note: gray, slate, and zinc are all neutral grays but with slightly different undertones. Slate leans cool-blue. Zinc is more neutral. Most projects pick one and stick with it.

Opacity Classes

Tailwind v3 introduced the opacity modifier syntax as a cleaner alternative to standalone opacity classes.

Instead of bg-blue-500 plus bg-opacity-50, you can write bg-blue-500/50. The slash notation works for text, background, border, and ring colors.

Standalone opacity for the whole element still uses opacity-*: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100.

Gradient Classes

Tailwind's gradient system uses 3 classes working together:

• bg-gradient-to-{direction}: sets direction (r, l, t, b, tr, tl, br, bl)

• from-{color}-{shade}: starting color

• to-{color}-{shade}: ending color

• via-{color}-{shade}: optional midpoint color

Example: bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 produces a horizontal 3-stop gradient. No custom CSS required.

OpenAI's ChatGPT interface uses Tailwind for much of its UI/UX design implementation, including gradient backgrounds in the marketing pages.

What Are the Border and Ring Utility Classes in Tailwind CSS?

Borders and rings are two separate systems in Tailwind. Borders are standard CSS border properties. Rings are box-shadow-based outlines, designed specifically for focus states without disrupting layout.

Knowing the difference matters. A border adds to the element's box model. A ring does not. This is why rings work better for keyboard focus indicators on buttons and form fields.

Border Width and Radius Classes

Border width classes map directly to border-width:

• border (1px), border-2 (2px), border-4 (4px), border-8 (8px)

• Directional: border-t-2, border-r-4, border-b-0, border-l-2

• border-0 explicitly removes a border, useful for resetting inherited styles

Border radius scale:

Class	Radius	Typical Use
rounded-sm	2px	Subtle rounding
rounded	4px	Default buttons
rounded-lg	8px	Cards, panels
rounded-2xl	16px	Modal dialogs
rounded-full	9999px	Avatars, pills

Border Color and Style Classes

Border color follows the standard color pattern: border-{color}-{shade}.

• border-gray-200 is the default light-mode divider used on most Tailwind UI components

• border-transparent hides the border visually while preserving layout space

Border style classes: border-solid (default), border-dashed, border-dotted, border-double, border-none.

border-dashed with a light gray color is the standard pattern for drag-and-drop upload zones. Nothing custom needed.

Ring and Divide Classes

Ring classes use box-shadow to draw an outline that doesn't shift layout.

• ring = 3px ring, ring-1 through ring-8 for explicit widths

• ring-offset-2 adds a white gap between the element and the ring

• ring-{color}-{shade} sets the ring color

Divide classes apply borders between child elements automatically:

• divide-x adds a vertical border between horizontally stacked children

• divide-y adds a horizontal border between stacked rows

• divide-{color}-{shade} sets the divider color

Shopify's Polaris design system uses ring classes extensively for keyboard accessibility across their admin interface, avoiding layout shifts on focus.

---

What Are the Sizing Utility Classes in Tailwind CSS?

Sizing in Tailwind covers fixed dimensions, responsive fluid widths, viewport-relative heights, and aspect ratios. The system is consistent with the spacing scale: w-4 = 16px, same as p-4 and m-4.

This alignment across spacing, padding, and sizing is what makes Tailwind layouts predictable across a full codebase.

Width and Height Classes

Width classes range from fixed (w-0 through w-96) to fractional and semantic:

• w-1/2, w-1/3, w-2/3, w-3/4: percentage-based fractions

• w-full: 100% of parent

• w-screen: 100vw (full viewport width)

• w-fit: shrinks to content width

• w-min / w-max: minimum or maximum content width

Height classes follow the same pattern, with 3 viewport-relative additions in v3.2+:

• h-svh: small viewport height (accounts for browser chrome on mobile)

• h-dvh: dynamic viewport height (updates as mobile browser bars show/hide)

• h-screen: static 100vh

h-dvh fixed a years-long mobile layout headache where 100vh didn't account for the browser address bar.

Min and Max Dimension Classes

Max-width is where Tailwind's named scale is most useful for content layouts:

• max-w-sm (384px) through max-w-7xl (1280px) for container widths

• max-w-prose (65ch): optimal reading line length, based on typography research

• max-w-none: removes the maximum width constraint

Min-width: min-w-0 prevents flexbox shrinkage issues. min-w-full forces full-width. Both come up constantly in table cells and flex item overflow bugs.

size-* (added in Tailwind v3.4) sets both width and height in one class. size-12 = w-12 h-12. Useful for icons, avatars, and square elements.

---

What Are the Effects and Filter Utility Classes in Tailwind CSS?

Tailwind covers shadows, opacity, blur, backdrop filters, and blend modes through dedicated utility classes. With JIT mode on by default since v3.0, all of these generate zero CSS overhead unless used (Tailwind documentation, 2024).

Shadow and Opacity Classes

Box shadow scale:

• shadow-sm: subtle elevation, used for inputs and cards at rest

• shadow / shadow-md: standard card elevation

• shadow-lg / shadow-xl: modals, dropdowns, floating panels

• shadow-2xl: heavy elevation for dialogs or hero sections

• shadow-inner: inset shadow for pressed or recessed states

• shadow-none: explicitly removes all shadows

Opacity: opacity-0 through opacity-100, stepping by 5. Apply to entire elements.

For per-property opacity, the slash syntax is cleaner: text-black/50, bg-white/80, border-gray-900/10.

Blur and Filter Classes

Blur utilities apply CSS filter: blur() to elements:

Class	Blur Amount	Use Case
blur-none	0	Remove blur
blur-sm	4px	Subtle depth effect
blur-md	12px	Background defocus
blur-xl	24px	Heavy background blur
blur-3xl	64px	Extreme depth effects

Backdrop filters apply effects to what's behind the element, not the element itself:

• backdrop-blur-sm through backdrop-blur-3xl: frosted glass effect

• backdrop-brightness-*: lighten or darken the background

• backdrop-contrast-*: increase contrast behind a panel

backdrop-blur-md bg-white/30 is the standard frosted glass card pattern seen across Next.js landing pages. No custom CSS required.

---

What Are the Transition and Animation Utility Classes in Tailwind CSS?

Tailwind's transition and animation classes handle CSS transitions and keyframe animations directly in HTML. No separate CSS file needed for the most common motion patterns.

Vercel's marketing site uses Tailwind transition classes paired with hover: variants for their card hover effects, keeping all state styling in the markup.

Transition and Duration Classes

Transition property classes control which CSS properties animate:

• transition: transitions color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, and filter

• transition-all: transitions every animatable property (more expensive)

• transition-colors: color and background changes only

• transition-transform: scale, rotate, translate

• transition-none: disables all transitions

Duration classes set animation speed: duration-75, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000.

Most hover effects feel right at duration-150 to duration-200. Anything above duration-500 starts to feel sluggish for micro-interactions.

Timing Function and Animation Classes

Easing options: ease-linear, ease-in, ease-out, ease-in-out. The default for most transitions is ease-in-out.

Delay classes add a pause before an animation starts: delay-75 through delay-1000. Useful for staggered entrance effects.

Built-in animation classes cover the 4 most common loading and attention patterns:

• animate-spin: continuous 360-degree rotation (loading spinners)

• animate-pulse: opacity fade in/out (skeleton screens)

• animate-ping: scale-up and fade (notification badges, live indicators)

• animate-bounce: vertical bounce (scroll indicators, attention cues)

animate-none disables animations, which pairs with the motion-safe: variant for respecting user accessibility preferences.

---

What Are the Responsive and State Variant Prefixes in Tailwind CSS?

Tailwind's prefix system is what makes utility classes genuinely powerful for responsive design work. Every utility in the framework can be prefixed with a breakpoint, state, or media query modifier.

The State of CSS 2025 survey shows Tailwind has the highest retention rate of any CSS framework, and the variant prefix system is a core reason developers stay with it.

Responsive Breakpoint Prefixes

Default breakpoints are mobile-first, meaning styles apply at that width and above:

Prefix	Min-Width	Target
sm:	640px	Large phones, small tablets
md:	768px	Tablets
lg:	1024px	Laptops
xl:	1280px	Desktops
2xl:	1536px	Wide screens

Critical note: Unprefixed classes apply to all screen sizes. sm: does not mean "mobile only." Write mobile styles first with no prefix, then override upward.

Interaction State Prefixes

Common state prefixes:

• hover: / focus: / active:: standard interaction states

• focus-within:: triggers when any child is focused (useful for form groups)

• focus-visible:: applies only for keyboard navigation focus, not mouse clicks

• disabled:: styles for disabled form elements

Group and peer variants handle parent-child state coordination:

• Add group class to the parent

• Use group-hover: on children to trigger when the parent is hovered

• peer marks a sibling element; peer-focus: or peer-checked: triggers on adjacent elements

Dark Mode and Arbitrary Value Syntax

Dark mode is configured in tailwind.config.js with 2 strategies:

• darkMode: 'media': follows the OS prefers-color-scheme setting automatically

• darkMode: 'class': triggers when a dark class is present on the html element (gives manual control)

Most applications use class strategy so users can toggle dark mode regardless of OS setting.

Arbitrary values handle one-off exceptions without touching the config file.

• w-[237px]: exact pixel width

• bg-[#1da1f2]: custom hex color (Twitter blue, in this case)

• grid-cols-[repeat(auto-fit,minmax(200px,1fr))]: complex grid template

• mt-[calc(100vh-4rem)]: CSS calc() inside a utility class

Arbitrary values keep the HTML the single source of truth, which matters when working with design handoffs from Figma where exact pixel values don't always match the spacing scale.

---

How Do You Customize Tailwind CSS Classes Beyond the Default Scale?

Tailwind's default scale covers the majority of use cases, but real projects always need adjustments. The customization system is built around tailwind.config.js, the @apply directive, and the arbitrary value syntax covered in the previous section.

Tailwind powers sites for companies including OpenAI, Vercel, Shopify, and Cloudflare. All of them use custom theme configurations layered on top of the defaults (State of CSS 2024).

Extending the Default Theme

Two approaches to customization:

• theme.extend: adds to Tailwind's defaults without removing anything

• theme (without extend): replaces the default entirely

Always prefer theme.extend unless you specifically want to remove built-in values.

Common extensions developers add:

• Custom brand colors under theme.extend.colors

• Additional font families under theme.extend.fontFamily

• Extra spacing values (like 18 = 72px) under theme.extend.spacing

• Custom breakpoints under theme.extend.screens

Using Arbitrary Values

Arbitrary values work for any CSS property, using square bracket syntax directly in class names.

• Spacing: p-[13px], mt-[22px]

• Colors: text-[#ff6b35], bg-[rgb(0,112,243)]

• Complex values: grid-cols-[200px_1fr_200px], clip-path-[polygon(0_0,100%_0,100%_75%,0_100%)]

• CSS variables: bg-[var(--brand-primary)]

JIT mode (default since v3.0) generates these classes on demand. There is no build time penalty for using arbitrary values.

Using @apply for Component Classes

@apply composes utility classes into reusable CSS rules. Useful for repeated patterns like buttons and form inputs where repeating 10+ classes in every HTML element becomes maintenance-heavy.

.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg transition-colors duration-150;
}

When to use @apply:

• Repeated component patterns used across 10+ instances

• Shared styles in a design system

• Cases where a CSS module or component abstraction isn't available

When not to use it: Don't reach for @apply just to shorten long class strings in a single-use element. The Tailwind team explicitly recommends keeping utility classes in HTML when they're only used once.

Like any javascript cheat sheet or quick-reference guide, this document covers the practical 90% of what you'll reach for daily. The full class list lives in the official Tailwind documentation, and the git cheat sheet approach applies here too: knowing what exists matters more than memorizing every value.

FAQ on Tailwind CSS

What Is the Fastest Way to Look Up Tailwind CSS Classes?

Keep a Tailwind CSS cheat sheet open alongside your editor.

The official docs at tailwindcss.com have a built-in search. The Tailwind CSS IntelliSense extension for VS Code autocompletes class names as you type, which is honestly the fastest lookup method in practice.

What Are the Most Used Tailwind CSS Utility Classes?

The classes developers reach for most are spacing (p-*, m-*), display (flex, grid, hidden), and color (bg-*, text-*).

Width and height classes like w-full, h-screen, and mx-auto also appear in nearly every project.

How Do Tailwind CSS Responsive Breakpoints Work?

Tailwind uses a mobile-first system. Unprefixed classes apply to all screen sizes. Prefixes like md: and lg: apply styles at that breakpoint and above.

Write your base (mobile) styles first, then layer larger screen overrides on top.

What Is the Difference Between flex and grid in Tailwind?

flex handles one-dimensional layouts: rows or columns. grid handles two dimensions simultaneously: rows and columns at once.

Use flex for navbars and button groups. Use grid for card layouts and page structure.

How Do You Apply Dark Mode Classes in Tailwind CSS?

Add dark: before any utility class: dark:bg-gray-900, dark:text-white.

Set darkMode: 'class' in tailwind.config.js for manual toggle control, or darkMode: 'media' to follow the OS preference automatically.

What Does the @apply Directive Do in Tailwind CSS?

@apply lets you compose utility classes into a single reusable CSS rule.

It is best used for repeated component patterns like buttons or form inputs. Avoid it for one-off styles. The Tailwind team recommends keeping utilities in HTML whenever possible.

How Do Arbitrary Values Work in Tailwind CSS?

Square bracket syntax lets you use any CSS value outside the default scale: w-[237px], bg-[#1da1f2], mt-[calc(100vh-4rem)].

JIT mode (default since v3.0) generates these on demand with zero build overhead.

What Is the Tailwind CSS Spacing Scale Based On?

The spacing scale uses a 4px base unit. So p-1 = 4px, p-4 = 16px, p-8 = 32px.

This consistent scale applies across padding, margin, width, height, and gap classes, keeping layouts visually coherent without a custom design system.

How Do You Extend Tailwind CSS Beyond the Default Classes?

Add custom values under theme.extend in tailwind.config.js. This adds to the defaults without removing anything.

Common extensions include brand colors, custom fonts, extra spacing values, and additional breakpoints.

Which Cheat Sheets Are Worth Bookmarking Alongside This One?

If you work across multiple languages and tools, a markdown cheat sheet, regex cheat sheet, and typescript cheat sheet cover the gaps Tailwind does not.

For version control, a git cheat sheet and docker cheat sheet round out a practical developer reference set.