Tailwind cheatsheet

SEO & Dev publishing

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

Updated May 25, 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.

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.

Common pitfalls

Check the result before replacing the original input.
Watch for unit, format, encoding, and browser memory limits on large inputs.
Keep a copy of important source material until the output is verified.

Privacy and security

Browser-first by design. The tool page explains any exception before you use it.

Your input is handled in the browser wherever the tool can process it locally. EpitomeTool does not add an upload step unless a tool page explicitly says so.

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.

Keep exploring

More tools you'll like

Hand-picked utilities that pair well with the one you're on — all free, client-side, and zero-signup.

More seo & dev publishing

See all →

Popular across EpitomeTool

Browse all →

Browse all 200+ free tools