Skip to content

Related Tools

View all 217 →
Gradient Builder
Try free →
Shadow Generator
Try free →
Flexbox Playground
Try free →
Border Radius Lab
Try free →
Glassmorphism
Try free →
Easing Wizard
Try free →

CSS to Tailwind Converter

Migrating a legacy CSS codebase to Tailwind is tedious. Every rule needs to be mentally translated from 'padding: 24px' to 'p-6', from 'display: flex' to 'flex', from 'box-shadow: 0 2px 8px...' to 'shadow-md'. This tool does the lookup for you. Paste any CSS rule block, get an ordered string of Tailwind utility classes ready to drop into your className attribute.

What It Maps

Full spacing scale — padding, margin, gap in pixels or rem, mapped to Tailwind's 4px-based scale (1=4px, 2=8px, 4=16px, 6=24px, etc.). Typography — font-size, font-weight (100-900), line-height, text-align, text-transform, text-decoration, font-style. Flex & Grid — display, flex-direction, justify-content, align-items, flex-wrap, grid-template-columns. Position & Size — position, top/right/bottom/left, width, height, min/max dimensions. Borders — width, style, color, radius with shorthand parsing. Arbitrary fallback — any value that doesn't match the scale gets wrapped in brackets: p-[13px], bg-[#f5a623].

📖
Deep Dive: The Complete CSS to Tailwind Guide
Spacing scale, color system, flexbox mapping, arbitrary values, responsive variants, and when not to convert — everything this tool does and what it can't do for you.
→

See also: For full pre-built components rather than a single conversion, the Tailwind Component Builder assembles cards, navs, and form patterns.

Common Use Cases

Migrating an existing stylesheet to a Tailwind-based design system without manually matching every CSS rule against the utility classes. Reviewing a designer's CSS handoff and seeing which spacings, colors, and font sizes map to your Tailwind theme scale and which fall outside it — those are the ones that need a design-token conversation before they harden into the codebase.

Onboarding a new team to Tailwind by showing the equivalence between the CSS they already know and the utility classes they're about to learn. Auditing third-party widget styles before integrating them into a Tailwind project, so the embedded CSS doesn't fight your utility classes at runtime. Validating a Tailwind config change by converting key CSS rules and confirming the output uses the new theme values instead of arbitrary brackets.

How We Compare

TailwindCSS's own "Tailwind CSS IntelliSense" extension surfaces utility classes as you type but doesn't convert existing CSS to them. WindiCSS and UnoCSS ship related compatibility modes but require a build-time integration. Server-side conversion APIs work but upload your CSS to a third party, which is awkward if the file encodes proprietary design tokens or unreleased brand colors.

This tool runs the conversion in the browser, parses your CSS, and matches each declaration against the default Tailwind scale, calling out values that don't map cleanly to a utility class so you know which custom theme entries you'll need. For the reverse — turning a set of Tailwind classes back into plain CSS for export to a non-Tailwind context — see Tailwind to CSS.

Frequently Asked Questions

What Tailwind version does this target?+
Tailwind CSS v3 conventions. This is the most widely used version, and most classes are compatible with v4 as well. If you need v4-specific changes like gap-y / gap-x syntax differences, verify the output against your version.
Does it handle arbitrary values?+
Yes. When a CSS value doesn't map to a standard Tailwind scale (like padding: 13px), the tool outputs an arbitrary value class like p-[13px]. This works in Tailwind v3+ and lets you use any value the CSS allowed.
What happens with unsupported properties?+
Properties without a clean Tailwind equivalent are listed in a warning section below the output. You'll know exactly what couldn't be converted, and can either add arbitrary value classes manually or keep those rules as custom CSS.
Can I paste multiple rules at once?+
Yes. The parser extracts declarations from the body of your CSS. Selectors are ignored — the output is just the utility classes for the declaration block. If you have multiple selectors, paste each one separately.
Which Tailwind version does the converter target?+
Tailwind 3.4 by default — the current stable version. Toggle to Tailwind 4 (alpha) for the newer engine’s class names; some utilities were renamed between versions.
What about custom values not in Tailwind’s default scale?+
They become arbitrary values like w-[137px] or text-[#5C72E8]. The converter prefers scale values when they’re close enough (within 1px or one shade) but falls back to arbitrary values when needed.
How does the tool handle pseudo-classes and media queries?+
Pseudo-classes become Tailwind variants (hover:, focus:, group-hover:); media queries become responsive prefixes (sm:, md:, lg:, xl:, 2xl:). Custom @media rules with non-standard breakpoints become arbitrary variants.
Will the output exactly match my source CSS?+
Visually, yes — the tool aims for pixel-equivalence. The output may use slightly different property ordering or shorthand than your input, but the rendered result is identical.

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service

Related Articles

Related Article
Cron Jobs, Chmod & Server Utilities Explained (2026)
Related Article
How to Encode and Decode Base64 (With Examples)
Related Article
How to Diff and Compare Code or Text Files