Tailwind CSS Cheat Sheet — Class Lookup

Search Tailwind CSS utility classes and instantly see the CSS they generate. Type a class name or CSS property to find what you need.

Related Tools

CSS Units Converter

CSS Gradient Generator

Flexbox Playground
Embed this tool on your site 
<iframe src="https://devtoolbox.dedyn.io/tools/tailwind-lookup" width="100%" height="800" frameborder="0"></iframe>

Frequently Asked Questions

What is a Tailwind CSS utility class?▼
A Tailwind CSS utility class is a small, single-purpose CSS class that applies one specific style rule. For example, flex applies display: flex, p-4 applies padding: 1rem, and text-center applies text-align: center. You compose these utility classes directly in your HTML to build designs without writing custom CSS. This utility-first approach enables rapid prototyping and keeps stylesheets small since unused classes are purged at build time.
How do I find the CSS for a Tailwind class?▼
Use the search box above to type any Tailwind class name (like flex, p-4, or text-lg) and instantly see the CSS it generates. You can also search by CSS property — type “display” to find all display-related classes, or “padding” to see spacing utilities. Click any result to copy the class name to your clipboard.
Can I use Tailwind CSS with other frameworks?▼
Yes, Tailwind CSS works with virtually any frontend framework or tool. It integrates seamlessly with React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, and plain HTML. Tailwind is a PostCSS plugin that generates utility classes at build time, so it fits into any build pipeline that supports PostCSS. You can also use the Tailwind CDN script for quick prototyping without any build step.
Keyboard Shortcuts
Ctrl+Enter Search
Ctrl+Shift+C Copy output
Ctrl+L Clear