Tailwind CSS Class Reference

This reference covers Tailwind CSS v3.x and v4.x utility classes. The core utility API remains stable across versions, though v4 introduces new features like native CSS nesting and improved performance. Color palettes, spacing scales, and shadow presets follow the default Tailwind configuration.

Use category prefix syntax in your search: type bg: to search only background classes, text: for typography, flex: for flexbox, etc. You can also use the category filter buttons below the search bar to toggle multiple categories on and off.

Arbitrary values let you use one-off custom values without editing your Tailwind config. Classes that support them show a sparkles icon. Select the class, then enter any value in the "Arbitrary value" field — like 20px, #ff0000, calc(100vh-4rem), or min(50%,300px). The preview and CSS output update instantly if the value is valid CSS.

The validator checks for valid CSS syntax. Common issues:

• Missing units on lengths (use 20px, not 20)
• Invalid characters like <, >, {, }
• Malformed CSS functions (missing closing parenthesis)
• Values over 100 characters Use standard CSS values or calc(), min(), max(), clamp() for complex expressions.

Yes. Select any class and click CSS, Minified, or @apply to copy the generated CSS. This is useful for:

• Prototyping without a build step
• Understanding what Tailwind generates
• Migrating away from Tailwind
• Using in environments without Tailwind installed

Click the moon icon in the preview panel to toggle between light and dark backgrounds. This helps verify contrast ratios and ensures your colors work in both modes. The toggle appears for any class with color visual type (backgrounds and text colors).

Grid view shows cards with class name, description, and category badge — best for browsing and discovery. List view condenses to rows with minimal information — best when you know what you are looking for and want to scan quickly. Your preference is not persisted; it resets on page reload.

This reference includes core utility classes (~150) covering the most common use cases. It excludes:

• Plugin-specific classes (forms, typography, aspect-ratio, etc.)
• Arbitrary variants (md:p-4, hover:bg-red, dark:text-white)
• Custom config extensions
• Deprecated v1/v2 classes For complete documentation including plugins and variants, visit the official Tailwind CSS docs.

Related classes share the same base prefix and category. For example, selecting p-4 shows p-1, p-2, p-8, px-4, py-4, etc. This helps you discover the full scale of a utility without searching repeatedly.

Yes. The entire class database is bundled with the tool — no network requests are made after initial load. You can bookmark the page and use it without an internet connection. Search, previews, and CSS generation all work client-side.

This tool requires a modern browser with ES2020+ support:

• Chrome/Edge 80+
• Firefox 75+
• Safari 13.1+
• iOS Safari 13.4+ Older browsers may have degraded search performance or missing preview features.

The CSS shown is approximated from Tailwind's defaults. Your actual build output may differ if you have:

• Custom tailwind.config.js values
• Plugins that modify utilities
• CSS layers or post-processing For bugs in this tool's output, check the official Tailwind documentation first, then verify against your actual build.