A CSS to Tailwind CSS Converter helps move an existing stylesheet toward utility-first markup without pretending that every CSS rule has a one-to-one Tailwind equivalent. Paste valid CSS into the editor, run the converter, and receive grouped utility classes for each supported selector. The result also separates declarations and selectors that still need manual CSS, so a partially convertible stylesheet never looks like a complete migration.
This converter is deterministic. It parses the stylesheet with a real CSS parser, maps documented declaration and value combinations, and uses Tailwind arbitrary-value syntax when a standard scale token is not an exact match. It does not call an AI service, interpret design intent, or invent theme tokens. The same input produces the same result, which makes the output suitable for careful review and repeatable migrations.
What CSS to Tailwind Conversion Means
Traditional CSS keeps declarations in rules such as .card { display: flex; gap: 1rem; }. Tailwind places small utilities such as flex gap-4 directly on the relevant element. Conversion therefore has two parts: mapping each declaration to a utility and deciding where that utility belongs in the component markup. This tool performs the first part. It labels the original selector beside its generated classes; you decide which JSX, HTML, or template element should receive them.
The distinction matters. A selector can describe relationships that no flat class list can preserve. Descendant selectors, sibling combinators, pseudo-elements, keyframes, and cascade-dependent rules may require markup changes, a Tailwind plugin, theme configuration, or retained CSS. Those cases appear under Requires Manual CSS instead of being silently discarded.
How to Use the Free CSS Converter
Paste a focused portion of a valid stylesheet into the input editor. Start with one component rather than an entire application because smaller batches make selector-to-element placement easier to verify. Choose Sample to see supported spacing, layout, color, hover, and responsive behavior, or use Clear to reset both editors and the conversion report.
Run the tool and review three pieces of information:
- The result editor lists each supported selector followed by its Tailwind utilities.
- Summary chips report converted declarations, unconverted declarations, and generated selector groups.
- The manual section names unsupported declarations, selectors, media queries, variables, animations, or at-rules.
Copy the result for a component-by-component migration, or download the plain-text class mapping for a code review. Before applying it, run your source through the JavaScript Formatter when utilities will be inserted into JSX, and use the React JSX Syntax Checker after updating React markup.
Standard Tailwind Utility Mappings
Common layout declarations map directly. display: flex becomes flex, display: grid becomes grid, and display: none becomes hidden. Flex direction, wrapping, justification, alignment, overflow, positioning, visibility, object fit, cursor behavior, and text alignment also use familiar Tailwind names. A grid declaration such as repeat(3, minmax(0, 1fr)) becomes grid-cols-3.
Spacing uses Tailwind's default scale only when the CSS value matches it exactly. For example, padding: 1rem becomes p-4, gap: 0.5rem becomes gap-2, and margin-top: 2rem becomes mt-8. The converter does not round a value merely because it is close. That prevents a migration from quietly changing layout dimensions.
Colors include common named-color mappings and arbitrary values for exact custom colors. color: black becomes text-black; background-color: #123456 becomes bg-[#123456]. Border colors, fill, stroke, outline color, font weight, font size, border radius, opacity, z-index, dimensions, shadows, and aspect ratio follow the same conservative rule: use a standard utility where the equivalence is clear, otherwise preserve the exact value.
Arbitrary Tailwind Values
Tailwind arbitrary values are useful when the stylesheet does not match the default design scale. padding: 18px becomes p-[18px], and a custom shadow becomes a shadow-[...] utility. Spaces inside arbitrary values are represented safely so the generated utility remains a single class token.
Arbitrary values preserve pixels, percentages, rem values, calculated expressions, and custom colors more faithfully than choosing the nearest standard utility. They are not automatically the best long-term design system. If the same value appears repeatedly, consider adding a named token to the Tailwind theme and replacing repeated arbitrary utilities with that token after the migration is stable.
Responsive CSS Conversion
The converter recognizes standard mobile-first min-width breakpoints at 640, 768, 1024, 1280, and 1536 pixels. Declarations inside those media queries receive sm:, md:, lg:, xl:, or 2xl: prefixes. A declaration inside @media (min-width: 768px) can therefore produce md:grid-cols-2 without losing its condition.
Other media expressions are reported for manual review. Maximum-width queries, compound conditions, orientation queries, print rules, user preference queries, and project-specific breakpoints cannot be safely rewritten without knowing the Tailwind configuration and intended breakpoint strategy. Keep those rules until you intentionally model them with configured variants.
Selectors, Pseudo Classes, and Pseudo Elements
Simple class, ID, or element selectors can be labeled directly. Supported state pseudo-classes include hover, focus, focus-visible, active, disabled, visited, checked, first-child, last-child, odd, and even. Their declarations receive the matching Tailwind variant, such as hover:shadow-[...] or focus:outline-blue-500.
Complex descendant selectors, child and sibling combinators, comma branches with unsupported syntax, attribute-dependent structures, and pseudo-elements such as ::before appear in the manual list. Tailwind can express many of these patterns, but choosing group, peer, arbitrary variants, or generated content requires knowledge of the markup. A deterministic converter should expose that decision rather than guess.
CSS Variables, Animations, and At-Rules
Declarations containing var(...) and custom property definitions beginning with -- are preserved for review. A CSS variable may represent a runtime theme, a fallback chain, or a value intentionally shared across stylesheets. Converting it blindly into a literal class could remove that behavior.
Animations and keyframes also require deliberate migration. Tailwind's animation utilities depend on theme keyframes and duration choices; the tool flags animation, animation-name, and @keyframes instead of returning an incomplete class. Font faces, supports queries, container rules, and other project-level at-rules receive the same treatment.
When This Migration Is Useful
Conversion is especially helpful when moving a small component library into a Tailwind project, replacing isolated legacy styles, or comparing current CSS values with a planned design scale. It is also useful during review: the converted count shows how much of a rule is routine, while the manual count reveals where cascade or architecture still matters.
Avoid treating the result as a global find-and-replace. Move one component, inspect it at every supported viewport, test interactive states, and remove the old CSS only after visual and behavioral checks pass. If the component contains React-specific structure, the React JSX Formatter can make the edited markup easier to review.
Common Migration Mistakes
A frequent mistake is deleting a rule because most of its declarations converted. One unsupported pseudo-element or inherited value may still be essential. Another is replacing exact values with nearby scale tokens and accepting subtle layout drift. Also watch for class ordering, theme overrides, dark mode, dynamically assembled class names, and utilities that a production content scanner cannot discover.
Keep manual CSS during the transition, confirm that responsive variants match the original media logic, and test keyboard focus as carefully as hover. The converter reports syntax errors rather than returning a plausible-looking partial result, so fix invalid CSS before judging the mapping.
Frequently Asked Questions
Does the converter change my CSS files?
No. It reads the pasted stylesheet in your browser and returns a class mapping. Your project files are not edited, and input is not uploaded by this page.
Why did a valid declaration appear under Requires Manual CSS?
Valid CSS is broader than the converter's proven mapping set. A declaration may depend on cascade, theme configuration, browser behavior, or markup structure even when its syntax is correct.
Should every arbitrary value become a Tailwind theme token?
Not necessarily. Keep genuinely one-off values arbitrary. Promote repeated or semantic values into named tokens when doing so improves consistency and maintenance.
Can this remove all component CSS?
Sometimes for simple components, but not as a guarantee. Complex selectors, generated content, animations, variables, and architectural rules may remain better expressed as CSS.