Tailwind CSS Cheat Sheet
Search common utility classes by name or CSS output, then click any result to copy the class.
How to Use This Tool
- Browse all utilities or choose a category such as Flexbox, Grid, Spacing, or Typography.
- Search by class name or CSS output, such as
flex,padding, or1rem. - Click a result to copy the Tailwind class name to your clipboard.
Common Use Cases
- Utility lookup: Find the class for a CSS property without searching through a long documentation page.
- Layout work: Compare flexbox, grid, sizing, and spacing utilities while building a component.
- Learning: See the approximate CSS output beside each class to reinforce how common utilities work.
Frequently Asked Questions
What is included in this Tailwind CSS cheat sheet?
The reference covers commonly used utility classes for layout, flexbox, grid, spacing, typography, colors, borders, effects, and sizing.
Does this reference include every Tailwind CSS class?
No. It is a focused quick reference for common utilities. Projects can also contain custom theme values, arbitrary values, variants, and plugin classes that are not listed here.
How do I copy a Tailwind class?
Search or browse the categories, then select a class card. The class name is copied to your clipboard.