The Tailwind CSS cheatsheet covers utility classes organized by category. Find flex, grid, spacing, typography, colors, borders, effects, responsive prefixes, and dark mode patterns. Copy any class or group with one click.
No classes found
Try a different search term
How to Use This Tailwind CSS Cheatsheet
Tailwind CSS is a utility-first framework where you compose designs directly in HTML using single-purpose classes. Instead of writing CSS, you combine classes like flex, p-4, text-lg, and bg-blue-500 to build any design.
Spacing Scale
Tailwind uses a consistent spacing scale where each unit equals 4px: p-1 = 4px, p-4 = 16px, p-8 = 32px, p-16 = 64px. This applies to padding (p-), margin (m-), gap, width (w-), and height (h-). Fractional values exist: p-0.5, p-1.5, p-2.5, p-3.5.
Responsive Design
Tailwind is mobile-first. Classes without a prefix apply at all sizes. Add sm:, md:, lg:, xl: to override at specific breakpoints. Example: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 starts single-column and expands as screen grows.
Flexbox Quick Reference
Start with flex then use justify-content (justify-start, justify-center, justify-between) and align-items (items-start, items-center, items-end) to position children. Add gap-4 for spacing between children.
FAQ
Is this Tailwind cheatsheet free?
Yes, completely free with no signup. Search and copy any class with one click.
Does this cover Tailwind CSS v3 and v4?
This cheatsheet covers the stable Tailwind CSS v3 utility classes which are used in the vast majority of projects. Tailwind v4 uses the same class names with some additions — core utilities like flex, grid, p-4, text-lg remain identical.
How do responsive prefixes work in Tailwind?
Tailwind uses mobile-first responsive prefixes: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), 2xl: (1536px+). Apply classes without prefix for mobile, then add prefixes to override at larger sizes. Example: class='text-sm md:text-base lg:text-lg' scales text up as screen grows.
How does Tailwind dark mode work?
Tailwind dark mode uses the dark: prefix with class-based triggering. Add the 'dark' class to your html element to enable dark styles. Example: class='bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100'. Configure darkMode: 'class' in tailwind.config.js.
How do hover and focus states work in Tailwind?
Use hover: and focus: prefixes before any utility class. Example: hover:bg-blue-700 changes background on hover. focus:ring-2 adds a focus ring. Other variants: active:, disabled:, group-hover: (for parent hover), peer-focus: (for sibling state).