Hoja de referencia de Tailwind CSS

What this Tailwind cheatsheet does

Tailwind CSS replaces hand-written stylesheets with hundreds of small, single-purpose utility classes — flex, p-4, text-center, and so on. The power of that approach is also its learning curve: remembering which class maps to which CSS property takes time. This cheatsheet is a fast, searchable lookup of the most-used Tailwind utilities, organized so you can find the right class in seconds and copy it with one click. Every entry shows the class name on one side and the exact CSS declaration it generates on the other, so you always know what the class actually does.

How to use it

There are two ways to find a class. First, the category pills across the top filter the grid to a single group — Layout, Flexbox, Grid, Spacing, Sizing, Typography, Borders, Effects, Filters, Transitions, Transforms, or Interactivity. Click "Flexbox" and you see only flex-related utilities. Second, the search box matches against both the class name and the underlying CSS property, which is what makes it genuinely useful: if you can't remember Tailwind's name for a property, search the CSS instead. Type justify-content and the matching justify-* classes surface even though you never typed "justify". Click any card to copy that class name to your clipboard.

Reading the badges

Two small badges on a card tell you how a class can be extended:

• responsive means the utility accepts breakpoint prefixes. Tailwind ships with sm: (640px), md: (768px), lg: (1024px), xl: (1280px), and 2xl: (1536px). A class marked responsive can become md:flex or lg:grid-cols-3, applying only at that screen size and up.
• hover: means the utility can take a state prefix such as hover:, focus:, or active: to apply on interaction.

Tailwind's prefixes stack, so a class can carry both a breakpoint and a state at once, like md:hover:bg-blue-600.

A worked example

Say you want a card that stacks its children vertically on phones but lays them out in a row on tablets and larger. Search flex-direction to find flex-col (column) and flex-row (row). Combine them with a breakpoint prefix:

<div class="flex flex-col md:flex-row gap-4">

Here flex turns on flexbox, flex-col stacks vertically by default, md:flex-row switches to a horizontal row at 768px and up, and gap-4 adds a 1rem gap between items. Every one of those classes is in this cheatsheet, and the CSS column confirms that gap-4 compiles to gap: 1rem and p-4 to padding: 1rem — Tailwind's spacing scale uses a base unit of 0.25rem, so each step of 1 equals 4 pixels at the default root size.

The mental model that makes Tailwind click

Tailwind's spacing, sizing, and color scales are deliberately consistent. Once you internalize that the spacing number is quarter-rems (p-2 is 0.5rem, p-8 is 2rem), you can predict most class names without looking them up. The grid utilities follow the same logic: grid-cols-3 creates three equal columns via repeat(3, minmax(0, 1fr)), and col-span-2 makes an item straddle two of them. Use this cheatsheet to confirm the exact value when precision matters and to discover utilities you didn't know existed.

Common mistakes

• Reaching for arbitrary values too soon. Before writing p-[13px], check whether a scale step like p-3 (0.75rem) already fits. Sticking to the scale keeps a design visually consistent.
• Forgetting the breakpoints are min-width. md:flex applies at medium screens and larger, not only on medium. Design mobile-first: set the base style for small screens, then layer larger-screen overrides on top.
• Adding a state prefix to a class that doesn't support it in your config. Hover and focus variants must be available for the utility; the hover badge here flags utilities where that pattern is common.
• Confusing margin and padding shorthands. p-* is padding (inside the border), m-* is margin (outside). The CSS column on each card removes the guesswork.

Why a quick reference beats memorizing

Even experienced Tailwind developers keep a cheatsheet open. The framework has too many utilities to hold in your head, and the value of Tailwind is speed — interrupting your flow to dig through documentation defeats the purpose. A searchable, copy-on-click reference like this lets you stay in your editor's rhythm: think of the CSS you want, search it, copy the class, move on.