Tailwind cheatsheet

SEO & Dev publishing

Search common Tailwind utility classes and view concise CSS behavior mappings.

Updated May 30, 2026

Search classes

Find utility classes by name, effect or group.

Matches (20)

Class	Description	CSS	Group
p-4	Padding all sides	padding: 1rem;	Spacing
px-6	Horizontal padding	padding-left/right: 1.5rem;	Spacing
mx-auto	Center block horizontally	margin-left/right: auto;	Spacing
grid	Display grid	display: grid;	Layout
grid-cols-3	Three equal columns	grid-template-columns: repeat(3,minmax(0,1fr));	Layout
flex	Display flex	display: flex;	Layout
items-center	Cross-axis center	align-items: center;	Layout
justify-between	Distribute items	justify-content: space-between;	Layout
text-sm	Small text	font-size: .875rem; line-height:1.25rem;	Typography
text-2xl	Large heading text	font-size: 1.5rem; line-height:2rem;	Typography
font-semibold	Semi-bold weight	font-weight: 600;	Typography
tracking-wide	Increase letter spacing	letter-spacing: .025em;	Typography
rounded-lg	Rounded corners	border-radius: .5rem;	Borders
border	1px border	border-width: 1px;	Borders
shadow-md	Medium shadow	box-shadow: 0 4px 6px -1px rgba(0,0,0,.1)...	Effects
bg-white	White background	background-color: #fff;	Background
bg-gray-900	Dark background	background-color: #111827;	Background
text-gray-700	Body text color	color: #374151;	Color
hover:bg-gray-50	Hover background	on hover: background-color #f9fafb;	State
focus:ring-2	Focus ring width	outline ring width 2px;	State

Quick start

How to use Tailwind cheatsheet

Search utility classes by intent and see CSS mappings instantly.

Step 1

Search utility

Type class names or effects like spacing, flex or typography.
Step 2

Compare mappings

Review class meaning and equivalent CSS.
Step 3

Use in code

Apply matching classes in your components.

In-depth guide

Tailwind cheatsheet

Quickly search and understand common Tailwind utility classes with plain-English descriptions and CSS equivalents.

Search-first workflow

Use keyword search by intent (for example, spacing, typography, hover) to find the right utility fast.

Class to CSS mapping

Seeing equivalent CSS helps onboard new team members and debug final computed styles.

How to use it

Search by what you want to do — “padding”, “flex”, “rounded” — rather than memorising class names.
Read the plain-English description and the equivalent CSS to confirm the utility does what you expect.
Copy the class straight into your markup.

Most utilities follow a predictable scale (p-4 = 1rem), and responsive prefixes like md: apply a class from a breakpoint up.

Pitfalls and privacy

Tailwind's JIT only generates classes it can see as complete strings — dynamically concatenated names like `text-${color}` get purged in production, so safelist them or use full class names. Utility values can drift between major versions, so confirm against your installed release. This cheatsheet is a static reference rendered locally in your browser; nothing you search is uploaded.

When to use it vs alternatives

Use this tool for quick browser-based work when you need an answer or output immediately. Use a dedicated application or automated workflow when you need bulk processing, approvals, or repeatable production rules.

Frequently asked questions

Which Tailwind version is this aligned with?

Entries are aligned with modern utility patterns used in Tailwind v3/v4 class naming.

Can I copy classes directly?

Yes. Class names are shown exactly as they should be used in markup.

Does this replace official docs?

No. This is a fast lookup and memory aid for commonly used utilities.

Why do dynamic class names disappear in production?

Tailwind's JIT only generates classes it sees as complete strings. Concatenated names like text-${color} get purged. Use full class names or safelist them.

How do responsive prefixes work?

A prefix like md: applies the utility from that breakpoint upward. Tailwind is mobile-first, so unprefixed classes apply at all sizes.

What does the spacing scale mean?

Most spacing utilities map to a rem scale where each step is 0.25rem, so p-4 equals 1rem of padding.

Keep exploring