UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Tailwind Class to CSS Converter

Look up what CSS properties any Tailwind CSS utility class generates, including responsive and state variants.

About Tailwind Class to CSS Converter

The Tailwind Class to CSS Converter looks up the underlying CSS properties generated by any Tailwind CSS utility class, including responsive prefixes (sm:, md:, lg:, xl:, 2xl:), state variants (hover:, focus:, dark:, group-hover:), and arbitrary value brackets (e.g. w-[42px]). Understanding what CSS Tailwind generates is essential for debugging, for migrating projects away from Tailwind to custom CSS, for writing component library documentation, or simply for learning what each utility does. The tool supports Tailwind v3 classes and covers spacing, typography, colors, layout, flexbox, grid, borders, shadows, and more.

Why use Tailwind Class to CSS Converter

  • Shows the exact CSS output for any Tailwind class including variants.
  • Supports arbitrary values (w-[42px], text-[#ff0000]) and all state prefixes.
  • Useful for migrating from Tailwind to vanilla CSS.
  • Helps developers understand what utilities do without reading docs.
  • Shows the exact CSS output for any Tailwind class including responsive and state variants.
  • Supports arbitrary values (w-[42px], text-[#ff0000]) and all state prefixes including dark: and group-hover:.

How to use Tailwind Class to CSS Converter

  1. Type a Tailwind class name (e.g. 'flex', 'text-lg', 'p-4', or 'hover:bg-blue-500') into the input.
  2. The generated CSS is shown instantly in the output panel.
  3. Use the copy button to copy the CSS output.
  4. Enter multiple space-separated classes to see all their CSS combined.
  5. The generated CSS is shown instantly in the output panel with proper selector wrapping for variants.
  6. Use the copy button to copy the CSS output for pasting into a stylesheet.
  7. Enter multiple space-separated classes to see all their CSS combined into a single block.

When to use Tailwind Class to CSS Converter

  • Learning what CSS property a specific Tailwind class applies.
  • Migrating a Tailwind project to vanilla CSS by extracting class definitions.
  • Debugging layout issues by checking the actual CSS a utility generates.
  • Documenting a component library with the underlying CSS for each utility.
  • Learning what CSS property a specific Tailwind class applies as you ramp up on the framework.
  • Migrating a Tailwind project to vanilla CSS by extracting class definitions to a single stylesheet.

Examples

Single spacing utility

Input: p-4

Output: .p-4 { padding: 1rem; /* 16px */ }

Hover state variant

Input: hover:bg-blue-500

Output: .hover\:bg-blue-500:hover { background-color: rgb(59 130 246); }

Responsive + state stacked

Input: md:hover:text-red-600

Output: @media (min-width: 768px) { .md\:hover\:text-red-600:hover { color: rgb(220 38 38); } }

Arbitrary value

Input: w-[342px]

Output: .w-\[342px\] { width: 342px; }

Tips

  • Use the @apply directive in your own CSS to encapsulate long Tailwind chains as reusable classes — but copy this tool's output rather than guessing.
  • Arbitrary values should be the exception, not the rule. If you find yourself writing w-[173px], add a value to your tailwind.config.js theme instead.
  • Variant order matters in Tailwind: dark:hover:bg-blue-500 differs subtly from hover:dark:bg-blue-500 in some browsers — paste both to compare.
  • Tailwind's spacing scale uses rem (1 = 0.25rem). p-4 = padding: 1rem; not padding: 4px.
  • Color utilities use the Tailwind palette ('blue-500', 'gray-900'). Match them against your design tokens before swapping.
  • Use this tool alongside a screenshot diff when a class change introduces unexpected layout shifts.

Frequently Asked Questions

Which Tailwind version does this use?▾
The tool is based on Tailwind CSS v3 class definitions and covers the full v3 utility set.
Does it support custom Tailwind theme values?▾
The tool uses Tailwind's default theme. Custom theme values defined in tailwind.config.js are not supported without configuration.
What about @apply — can I expand it?▾
This tool looks up individual class CSS. It does not expand @apply directives from a source file.
Can I look up multiple classes at once?▾
Yes. Enter space-separated class names and the tool returns the combined CSS output.
Does it support JIT / arbitrary values like w-[42px]?▾
Yes. Arbitrary value classes (square bracket syntax) are parsed and the corresponding CSS property is generated.

Explore the category

CSS Grid Playground Prototype grid templates, gaps, and alignment with a responsive preview and CSS export. Container Query Helper Author @container boilerplate with names and breakpoints for component-driven responsive CSS. Mermaid Live Editor Write Mermaid diagram syntax and see a live SVG preview — flowcharts, sequence, Gantt, class, ER, and state diagrams. CSS Minifier Minify CSS by removing comments and whitespace CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. SemVer Tester Diff Validate and compare semantic versions, including bump classification.
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min

Glossary

Utility class
A small, single-purpose CSS class (e.g. .p-4, .text-center) that applies one or a few CSS properties. Tailwind's core philosophy.
Responsive prefix
Tailwind variant (sm:, md:, lg:, xl:, 2xl:) that scopes a utility to a min-width media query. sm:p-4 = padding: 1rem above 640px.
State variant
Tailwind variant (hover:, focus:, dark:, disabled:, group-hover:) that scopes a utility to a CSS pseudo-class or state context.
Arbitrary value
Square-bracket syntax (w-[173px], bg-[#1a73e8]) that lets you use any value not in the theme. Generated by Tailwind's JIT engine.
JIT (Just-In-Time)
Tailwind's on-demand compilation engine. Generates only the utility classes used in your source files, enabling arbitrary values and tiny bundle sizes.
Theme
The configuration object in tailwind.config.js that defines spacing scale, color palette, breakpoints, and other design tokens.
@apply
Tailwind directive used inside your own CSS to compose a custom class from existing utilities. Resolves at build time.
group / peer
Tailwind's mechanism for sibling- or parent-state styling. group-hover:opacity-100 styles a child when its parent .group is hovered.