/01 A searchable map of Tailwind to CSS
Tailwind CSS is built from utility classes: small, single-purpose class names that each emit one piece of CSS. Learn the naming pattern and you can style almost anything without leaving your HTML. The catch is that the pattern has to be learned, and the class names are not always what you would guess.
This cheat sheet is a searchable reference that pairs every utility class with the CSS it actually generates. Search for a class name and see its declaration. Search for a CSS property and find the class that produces it. Either direction works, which covers both halves of the job: confirming what a class does before you ship it, and finding the class for something you know you want.
The copy button puts the class on your clipboard ready to paste into markup. When you half-remember a class name, a partial search finds it faster than scrolling documentation, and the generated CSS beside it confirms you found the right one.
/02 Why seeing the CSS matters
Tailwind classes are a thin layer over ordinary CSS, and the reference shows the declaration under every class. That single piece of visibility removes most of the guesswork from working with the framework.
It is most useful for the classes whose names are not obvious. The spacing scale maps numbered steps to rem values. The flex and grid shorthands carry a lot of meaning in few letters. The ring and divide utilities do things that their names only hint at. For all of these, seeing the emitted declaration is faster than holding the mapping in your head.
It also settles the questions that debugging raises. When two classes both set the same property, the one that wins is decided by the order in the stylesheet, not the order you wrote them in your markup. Seeing the declarations makes those collisions obvious before they become bugs.
/03 The naming pattern, once you see it
Most of Tailwind follows a small number of naming rules, and the cheat sheet makes them visible by grouping. Variants come first: hover, focus, and responsive breakpoints attach to the front of a class and make it apply only under that condition. Then comes the property, usually shortened: p for padding, m for margin, w for width, text for font size and colour, bg for backgrounds.
Then comes the value. Some values are on a numbered scale, like spacing and font sizes. Some are named, like the colour palette. Some are literal, like fractional widths or arbitrary values written in square brackets.
Once the pattern is visible, unfamiliar classes become readable instead of opaque. You stop memorising classes and start reading them, which is the whole point of a utility framework: the name tells you what it does, and the reference is there to check.
/04 When a class does not apply
The most common Tailwind problem is a class that appears in markup and does nothing. There are three usual causes, and the cheat sheet helps spot the first two.
One: another class or stylesheet rule sets the same property with higher specificity. The emitted CSS in the reference shows what the class is fighting against. Two: the class was built by joining strings together in your code. Tailwind's scanner reads your source files for complete class names, so a class assembled at runtime is invisible to it and never gets generated. Write the full class name somewhere it can be seen, or safelist it.
Three: the class exists in a different version of Tailwind than the one in your project. Names and configuration changed between v3 and v4, so if a class looks unfamiliar or a search comes up empty, check the version your project runs.
Note that the reference covers the standard utilities. Arbitrary value syntax, the square-bracket form for one-off values, works alongside these but is not something a static reference can enumerate.
/05 Using a Tailwind cheat sheet to learn faster
Nobody memorises every Tailwind class, and the official documentation, while thorough, is organised by topic rather than by what you are trying to find. A Tailwind cheat sheet flips that around: search for the CSS you already know, such as justify-content or letter-spacing, and see the utilities that produce it.
The fastest way to learn is to search in both directions. When you meet an unfamiliar class in someone else's code, look it up to see its CSS. When you know the CSS you want, search the property to find its class. After a few days the naming patterns click, and you stop needing to look things up for the common utilities.
Keep it open in a tab while you build. It is quicker than switching to the docs, and because it shows the actual CSS, it doubles as a reminder of how each property behaves.