⚡ FREE · SEARCHABLE

Tailwind CSS Cheat Sheet: Find Any Class and Its CSS Fast

Search Tailwind utility classes, see the CSS they produce, and copy them in one click.

🔍 Search by class or CSS
📋 Click to copy
🆕 v3 to v4 rename notes

How to use the Tailwind CSS Cheat Sheet

1. SearchType part of a class (rounded) or a CSS word (justify) to filter the list.
2. Filter by categoryNarrow down to spacing, flexbox, grid, typography and more.
3. Copy the classClick a class name to copy it, or download the whole sheet.

How Tailwind's spacing scale works

Tailwind's default spacing unit is 0.25rem, which is 4px when the browser font size is 16px. The number in a class is a multiple of that unit. So p-4 = 4 × 0.25rem = 1rem (16px) of padding, m-8 = 2rem (32px) and gap-2 = 0.5rem (8px). Search p-4 above and the sheet shows padding: 1rem.

The same numbers work for width, height, margin, gap and positioning, which is why Tailwind layouts stay consistent. Fractions such as w-1/2 give percentages, and px means exactly 1px.

Prefixes, states and the v4 changes

Any class can take a prefix. Breakpoints are mobile-first: md:flex means "flex from 768px wide and up", so write the mobile style first and add prefixes for bigger screens. State prefixes such as hover:, focus-visible: and disabled: work the same way.

Tailwind v4 (released in 2025) kept most class names but renamed a few small sizes:

v3 shadow-sm is now shadow-xs, and v3 shadow is now shadow-sm.
v3 rounded-sm is now rounded-xs, and v3 rounded is now rounded-sm.
outline-none became outline-hidden for the old behaviour.

Rows with these classes carry a note. Colour classes follow the pattern text-blue-600 or bg-gray-100; shades run from 50 to 950, and v4 defines them in the oklch colour space, so exact hex values differ slightly from v3.

Frequently asked questions

Which Tailwind version does this sheet follow?

Class names and values are the defaults shared by v3 and v4. Where v4 renamed a class, the row says so.

How do I use a value that is not in the scale?

Use square brackets, for example w-[350px] or mt-[7px]. Tailwind creates the class for that exact value.

Why is my md: class not working on mobile?

md: only applies from 768px and wider. Write the mobile style without a prefix and add md: for larger screens.

Is the cheat sheet free?

Yes. Search and copy classes as much as you like. Only the full text download asks for your name and WhatsApp number, once for all Uncodemy tools.

More free tools

See all free tools