Tailwind CSS Converter
Convert Tailwind CSS utility classes to plain CSS and vice versa. Supports spacing, colors, typography, flexbox, grid, and more.
How to Use
- Choose a direction: Tailwind → CSS or CSS → Tailwind.
- Paste your Tailwind classes (e.g.,
flex items-center p-4 bg-blue-500) or CSS declarations. - Click Convert to generate the equivalent code.
- Copy the output and use it in your project.
Why Convert Between Tailwind and CSS?
Tailwind CSS is a utility-first framework where you style elements using pre-defined classes directly in your HTML. Sometimes you need to see what CSS a set of Tailwind classes actually produces — for debugging, for use in non-Tailwind projects, or for understanding what a component does.
Going the other direction, converting CSS to Tailwind helps when migrating an existing project to Tailwind, or when you know the CSS you want but need to find the right utility class name.
Supported Utilities
- Layout — display, position, overflow, visibility, z-index
- Flexbox — flex direction, wrap, justify, align, grow, shrink
- Grid — grid-template-columns, col-span
- Spacing — padding, margin (all directions), gap, width, height, min/max
- Typography — font-size, font-weight, text-align, line-height, text-decoration, text-transform
- Colors — text, background, and border colors (full Tailwind palette)
- Borders — border-width, border-radius, border-style
- Interactivity — cursor, pointer-events, user-select
- Arbitrary values —
[property:value]syntax
Limitations
This converter handles the most common Tailwind utilities. Some advanced features are not yet supported: @apply directives, custom plugins, theme() references, and complex responsive/state variant combinations. For these, refer to the official Tailwind CSS documentation.
Related Tools
Format your CSS with the CSS Minifier & Beautifier. Beautify HTML that uses Tailwind classes with the HTML Beautifier. Pick colors for your Tailwind config with the Color Picker. Compare style changes with the Diff Checker.
Frequently Asked Questions
- Which Tailwind CSS version does this support?
- The converter supports Tailwind CSS v3 utility classes including spacing, colors, typography, layout, flexbox, grid, borders, and more. Most v4 classes are also compatible.
- Does it handle responsive prefixes like md: or lg:?
- When converting Tailwind to CSS, responsive prefixes (sm:, md:, lg:, xl:, 2xl:) and state variants (hover:, focus:, etc.) are noted as comments. The base utility is still converted to its CSS equivalent.
- Can I convert CSS back to Tailwind?
- Yes. Switch to "CSS → Tailwind" mode and paste your CSS declarations. The tool maps CSS property-value pairs back to their closest Tailwind utility class. Properties without a direct Tailwind match are shown as arbitrary value suggestions.
- What about custom Tailwind config values?
- The converter uses Tailwind's default configuration (default spacing scale, default colors). Custom values defined in your tailwind.config.js are not included, but you can use arbitrary value syntax like p-[17px] which the converter handles.
- Is my data safe?
- Yes. All conversion happens entirely in your browser. No data is sent to any server.
AI agent tools available.
The CodeTidy MCP Server gives Claude, Cursor, and other AI agents
access to 47 developer tools. One command: npx @codetidy/mcp