About Tailwind CSS Cheatsheet

Layout, spacing, colors, variants, and pro tricks. Part of the DevTools Surf developer suite. Browse more tools in the Cheatsheets collection.

Use Cases

• Finding the right spacing class during rapid UI prototyping
• Looking up responsive breakpoint prefixes for mobile-first design
• Referencing color class names when implementing a design mockup
• Reviewing dark mode variant syntax for theme implementation

Tips

• Search by CSS property to find the matching Tailwind class
• Check the variants section for hover, focus, and responsive prefixes
• Review the spacing scale for consistent margin and padding values

Fun Facts

• Tailwind CSS v1.0 was released in May 2019, and by 2024 it had become the second most popular CSS framework after Bootstrap, with over 80,000 GitHub stars.
• Tailwind's JIT (Just-in-Time) engine, introduced in v2.1 (2021), generates only the CSS classes you actually use, reducing build sizes by up to 95%.
• The Tailwind CSS configuration file can generate over 17 million unique class combinations when considering all variants, but JIT ensures only used classes are output.

FAQ

Which Tailwind version?

v3.4+. The core utility classes have been stable since v2; v3 added arbitrary values `[]` and JIT; v3.4 added container queries.

Does it cover arbitrary values?

Yes — `w-[calc(100%-2rem)]`, `bg-[#1a1a2e]`. Essential for one-off designs that don't fit the default scale.

What about responsive variants?

All five: sm, md, lg, xl, 2xl. Plus the mobile-first philosophy (default = mobile, variants scale up).

Dark mode?

Yes — both the `class` strategy (recommended) and the `media` strategy. Plus how to toggle in JS.