Maintained by the EverydayTools Design Systems Team · Tailwind v3.4 + v4 reference · Last updated July 2026
Skip to Tailwind reference toolSearch mapped utilities, compose class strings, preview responsive and dark states, and copy HTML, CSS, or Tailwind Play links.
A searchable Tailwind CSS utility map with CSS property mappings, a live class composer, responsive/dark preview, flex/grid playgrounds, and one-click export to HTML, CSS, or Tailwind Play.
This page combines two workflows developers actually need: a fast utility lookup (class → CSS property → value) and a composition workspace where you stack classes, preview the result, and copy production-ready output.
Unlike static cheat-sheet PDFs, every utility row is filterable, copyable, and linkable. The composer persists favorites and recent picks in localStorage, encodes selections into shareable URLs, and maps composed classes to approximate CSS for handoff.
Coverage spans layout, flex, grid, spacing, typography, color scales, effects, filters, transitions, transforms, accessibility helpers, responsive/dark/state variants, container queries, and Tailwind v4 at-rules. Official Tailwind documentation remains the source of truth for plugin edge cases—this tool optimizes day-to-day lookup and prototyping.
Type in the search bar (press / to focus) or tap a category pill—Layout, Flexbox, Colors, State Variants, Tailwind v4, and more.
Click a class row to toggle it in the composer, or use the Copy button for a single utility. Star rows to save favorites.
Open the Composer tab, toggle dark preview and sm/md/lg viewports, and inspect generated HTML and CSS mapping panels.
Copy the class string, HTML snippet, or CSS block—or open Tailwind Play. Share links encode your selection in the URL query string.
Common real-world scenarios where this tool saves time.
Find the exact class for a CSS property—gap vs space, ring vs shadow, col-span vs grid-cols—without leaving your browser tab.
Compose flex/grid stacks live, share a URL with teammates, and paste the class string into your codebase or Tailwind Play.
Export CSS mappings alongside class strings when documenting tokens for engineers who do not live in Tailwind docs.
Browse @theme, @source, @utility, and @variant entries alongside v3 utilities to compare migration paths.
Step-by-step chains that connect related tools for common tasks.
Input
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6Output
grid-template-columns responsive breakpoints with gap-6 (1.5rem)Mobile-first grid that grows from one column to three without custom media queries in your CSS file.
Input
inline-flex … focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2Output
Visible keyboard focus ring without styling mouse :focusPair focus-visible utilities with ring-offset for WCAG-friendly keyboard navigation.
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| Spacing Scale Assistant | You need Tailwind class names, CSS mappings, and a composer with export. | You are choosing which spacing tokens belong in your design system before writing classes. |
| Typography Scale Generator | Looking up font-size, leading, and tracking utilities. | Building a modular type scale with CSS variables or JSON tokens. |
| CSS Button Generator | Browsing focus-visible and hover utilities for interactive elements. | Exporting full button pseudo-class CSS with gradients and shadows. |
Start with base layout classes, then add sm:/md:/lg: overrides sparingly—preview at each viewport in the composer.
When using dark:, mirror light tokens (bg-white dark:bg-slate-900) and test with the dark preview toggle.
Paste real content into the HTML preview mentally—verify truncation, wrapping, and min-height before shipping.
Prefer gap-* on flex/grid parents—margin collapses and breaks with wrapping; gap stays predictable.
Use focus-visible:ring-* utilities rather than outline-none alone; preview keyboard focus in the Composer tab.
Stay on the spacing scale when possible—use the Spacing Scale Assistant to pick consistent tokens first.
Only one display utility wins—avoid combining hidden and flex without responsive prefixes.
Likely cause: Utilities apply to the preview container, but sample child elements keep their own fixed classes.
Fix: Test layout utilities (flex, grid, gap) first—they affect the container. For text color or font-size, imagine the class on the element that actually needs it in your component.
Likely cause: The ?c= query parameter was truncated, stripped by a messenger app, or the URL was opened without the full string.
Fix: Copy the class string directly from the Composer tab. Keep share URLs under ~2,000 characters; split very long stacks into multiple copies.
Likely cause: This panel maps utilities to approximate declarations. Preflight, CSS variables, minification, and custom @theme tokens change final output.
Fix: Treat the CSS block as documentation. Verify in your app with DevTools computed styles or the Tailwind build output.
Likely cause: Custom plugin utilities, @apply component classes, and project-specific theme extensions are not in the default dataset.
Fix: Check tailwindcss.com/docs for plugin classes. Filter by category or version (v3 / v4) in case the utility is listed under a variant row (e.g. md:flex).
Likely cause: The preview simulates viewport width and a dark background wrapper—it does not run your app's full dark-mode strategy (class vs media).
Fix: Toggle dark preview and sm/md/lg widths to sanity-check tokens, then confirm in your app with the same darkMode setting from tailwind.config or v4 @variant.
Likely cause: Multiple utilities can map to similar CSS values (e.g. p-4 vs px-4 py-4). Arbitrary values and theme extensions are not always exact matches.
Fix: Pick the utility that matches your design system scale. Prefer gap over margin, theme colors over arbitrary hex, and verify in Tailwind Play before committing.
Likely cause: localStorage was cleared, private browsing ended, or browser storage quota blocked a save.
Fix: Re-star utilities as needed. Share URLs (?c=) do not depend on localStorage—use them for cross-device handoff.
Likely cause: Clipboard API requires a secure context (HTTPS) and a direct user gesture; some browsers block programmatic copy.
Fix: Tap the copy button again after interacting with the page, or long-press the code block to copy manually.
Use tailwind.config.js or v4 @theme / @source in your repo. This page is a lookup and composer—not a build pipeline.
Official Tailwind docs and plugin READMEs list form resets, prose classes, and third-party utilities not generated in this dataset.
Start with tailwindcss.com/docs or the Tailwind Play tutorial. This tool assumes you know what a utility class is and need speed or export.
Use component libraries (Headless UI, shadcn/ui, Flowbite) or your design system. The pattern presets here are starting points, not accessible production components.
Design handoffs often use one-off values. Use arbitrary syntax sparingly; map tokens with Spacing Scale Assistant and Typography Scale Generator first.
Editor extensions autocomplete inside your project with your exact config. This reference uses default theme scales and cannot see your custom theme.
Individual sr-only and focus-visible utilities are listed, but page-level audits need axe, Lighthouse, or manual keyboard testing—not a class picker.
The page requires an initial load. For fully offline use, download official Tailwind docs or use IDE snippets; composer state in localStorage still needs the app cached.
Continue the workflow with the right follow-up tool.
No—it is an interactive reference and composer optimized for lookup speed and copy/export. Use tailwindcss.com/docs for plugins, configuration, and edge cases.
Utility mappings follow Tailwind v3.4 defaults plus v4 at-rule reference entries. Filter by version in the reference table. Verify against your project's config when upgrading.
Click Copy on any reference row, or click the class badge to add it to the composer and copy the combined string from the Composer tab.
Selected classes apply to a preview container. Toggle dark mode and sm/md/lg widths to stress-test responsive and dark: utilities. Child markup is fixed sample content.
Yes—Share URL copies a link with ?c= encoded classes. Favorites and recent picks persist in localStorage on this device.
The CSS panel shows property mappings for documentation and handoff. Production builds may differ slightly due to preflight, variables, and minification—always verify in your app build.
Use Open in Tailwind Play from the Composer tab—it pre-fills a minimal HTML snippet with your class string.
No—search, favorites, and composer state run locally in your browser. Share links encode data in the URL only.
Utility-first means composing small single-purpose classes in markup (flex, gap-4, text-sm) instead of writing bespoke component CSS—see the glossary-level overview in our methodology section.
The dark: prefix applies utilities when dark mode is active—pair light and dark tokens (bg-white dark:bg-slate-900) and test with the composer dark preview.
@theme is a CSS-first directive to define design tokens in v4. Browse v4 category rows for @theme, @utility, and @variant examples.
Square-bracket classes like w-[347px] escape the default scale for one-off values—use sparingly; prefer theme tokens from the spacing and typography tools linked on this page.
Utility search, favorites, and composer state are processed locally. Share URLs encode selections in query parameters only—nothing is stored on EverydayTools servers.
Mappings are validated against Tailwind v3.4 default theme and v4 documentation. Re-verify when using custom themes or plugins.
Reference and prototyping tool—not a substitute for your production Tailwind build pipeline.
Advertisement
Reviewed by EverydayTools Design Systems Team on 2026-07-05.
Same workflow or intent — pick the next step without leaving the site.
Create favicons at 16×16, 32×32, 48×48, and 64×64 from text, emoji, or uploaded images—download ICO bundles or individual PNG assets for websites.
Build 4px, 8px, or custom-base spacing scales—export CSS variables, Tailwind config snippets, or design-token JSON for consistent layout rhythm.
Free CSS border radius generator — set individual corner values visually and copy the CSS border-radius property instantly. Supports all four corners independently. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS box shadow generator — set X/Y offset, blur radius, spread, and color visually with live preview. Copy the finished CSS box-shadow property instantly. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS clip-path generator — build polygon, circle, and ellipse shapes visually with draggable points and copy the clip-path CSS property instantly. No signup needed. Runs locally in your browser when supported—no upload required for normal use.
Free color contrast checker — test text and background color combinations for WCAG AA (4.5:1) and AAA (7:1) compliance. Essential for accessible web design. No signup. Runs locally in your browser when supported—no upload required for normal use.
Frequently opened tools from the same category.
Free color palette generator — create complementary, analogous, triadic, and monochromatic palettes from any base color. Copy HEX codes instantly. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free CSS gradient generator — create linear and radial gradients with custom colors, stops, and directions. Live preview and one-click CSS copy. No signup required. Runs locally in your browser when supported—no upload required for normal use.
Free favicon generator — create website favicons in 16×16, 32×32, 48×48, and 64×64 PNG sizes from text, emoji, or an uploaded image. Download as .ico or individual PNG files. No signup. Runs locally in your browser when supported—no upload required for normal use.
Free color contrast checker — test text and background color combinations for WCAG AA (4.5:1) and AAA (7:1) compliance. Essential for accessible web design. No signup. Runs locally in your browser when supported—no upload required for normal use.
Cross-category tools others open in the same session.
Free JSON formatter — paste minified or messy JSON and instantly get beautified, indented output with syntax highlighting and error detection. Browser-based, no server upload. Runs locally in your browser when supported—no upload required for normal use.
Compress JPG, PNG & WebP in your browser—up to 80% smaller, batch 25 files, 50/100/200 KB presets. Files stay on your device. No signup.
Free PDF merger — combine multiple PDF files into one document. Drag to reorder files, preview pages, and download the merged PDF instantly. No signup, fully browser-based. Runs locally in your browser when supported—no upload required for normal use.
Instantly count words, characters, sentences, paragraphs, and reading time. Great for essays, articles, and SEO writing. No signup — works as you type. Runs locally in your browser when supported—no upload required for normal use.
Browse full tool collections by topic.