Tailwind CSS Cheatsheet
NewUtility class reference for layout, spacing, typography, colors, and responsive design.
Frequently Asked Questions
Does this help with responsive prefixes and hover/focus variants, or only base utilities?
It covers both. The tabs include Responsive Breakpoints and State Variants alongside Layout, Spacing, Typography, Colors & Backgrounds, Borders & Effects, and Transitions & Animation.
Are these just class names, or do I get fuller syntax and examples too?
You get both. Short mode is good for scanning utilities quickly, while full syntax and example mode make it easier to remember how a utility is actually used in markup.
Can I search flexbox or grid utilities without browsing every section manually?
Yes. Search works across category labels, utility names, syntax, descriptions, and examples, and there is also a dedicated `Flexbox/Grid utilities detail` tab.
Does this include Tailwind config or plugin authoring help?
Not really. This component is focused on day-to-day utility usage and variants, not `tailwind.config` design tokens, plugin APIs, or build setup.
If I forget which spacing or sizing utility I need, is the page built for quick lookup?
Yes. The separate Spacing and Sizing tabs make it faster to narrow down utilities like margin, padding, gap, width, height, and viewport sizing instead of scanning a single giant list.