PocketPlay
中文

Tailwind CSS Cheat Sheet

Searchable Tailwind CSS reference: every core utility class mapped to the CSS it generates, with the spacing scale, colour palette and responsive prefixes.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up
0

Click any class to copy it. Everything here is Tailwind CSS v3 core, no config needed.

How to use this Tailwind cheat sheet

  1. Type part of a class name (grid-cols) or of a CSS property (justify-content) in the search box — every section filters as you type.
  2. Use the category chips to jump straight to layout, flexbox, spacing, colours, borders, effects or prefixes.
  3. Click any class or colour swatch to copy it to your clipboard, then paste it into your markup.

FAQ

Which Tailwind version is this?

Tailwind CSS v3 with the default configuration — the spacing scale, the 22-family colour palette and the standard breakpoints. Most of these class names are unchanged in v4; only the config format differs.

Why can't I find a class like p-13?

It is not in the default scale. Tailwind supports arbitrary values instead: p-[13px], text-[#1da1f2], grid-cols-[1fr_auto]. Underscores become spaces.

What do the prefixes mean?

A prefix before the colon is a variant: md: applies from 768px up, hover: on hover, dark: in dark mode. They stack, so md:hover:bg-blue-600 is valid.

CSS Gradient GeneratorHOT Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file. CSS Filter Generator Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule. CSS Animation Generator Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview. Box Shadow Generator Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS. Border Radius Generator Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS. Color PickerHOT Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast. Color Converter Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly. CSS Grid Generator Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.

All tools →