Tailwind CSS Cheat Sheet

Searchable reference for Tailwind CSS utility classes with their CSS output. Click any class to copy.

How to use

  1. Use the search box to filter by class name or CSS property.
  2. Click any category to expand or collapse it.
  3. Click a class name to copy it to your clipboard.

Frequently asked questions

What CSS does a Tailwind class generate?

Each Tailwind class maps to one or more CSS properties. For example, "p-4" generates "padding: 1rem". This cheat sheet shows the exact CSS for every class.

How do I use arbitrary values in Tailwind?

Use square bracket notation: w-[200px], text-[#1a1a18], p-[13px]. This works with any utility that accepts a value.

What is the Tailwind spacing scale?

Tailwind uses a consistent spacing scale where 1 unit = 0.25rem (4px). So p-1 = 0.25rem, p-4 = 1rem, p-8 = 2rem.

How do I find the right Tailwind class?

Use the search box on this page to filter by class name or CSS property. Type "flex" for flexbox, "rounded" for border-radius, etc.

Last updated

Powered by maratool