CSS to Tailwind CSS Converter
Paste CSS to get a best-effort conversion into Tailwind utility classes, with anything that can't be confidently mapped listed separately for manual conversion. Free online developer tool.
Paste CSS
Tailwind Classes
Tailwind classes will appear here...
Free CSS to Tailwind CSS Converter (Best-Effort)
Paste CSS to get a best-effort conversion into Tailwind utility classes. Common layout, spacing, typography, and color declarations are mapped against Tailwind's default theme; anything the tool can't confidently map is listed separately under "Not auto-converted" so you know exactly what still needs manual attention.
How to Use It
Paste a CSS rule or stylesheet into the input box, or click "Load Example". The tool parses each declaration and checks it against small built-in lookup tables — Tailwind's default spacing scale, a subset of the default color palette (nearest-color matching by hex distance), and direct mappings for common properties like display, position, andtext-align. Matched declarations become a class string; unmatched ones are listed as a warning below the output.
Example
display: flex; padding: 16px; maps cleanly to flex p-4, while something likebackground: linear-gradient(...) has no safe direct Tailwind utility equivalent and is listed under "Not auto-converted" instead of being guessed incorrectly.
Common Use Cases
- Getting a rough first pass when migrating a component's CSS to Tailwind utility classes.
- Spot-checking which of your CSS declarations have obvious Tailwind equivalents.
- Learning Tailwind's naming conventions by comparing them against familiar CSS.
FAQs
How accurate is this conversion?
This is explicitly a best-effort tool. It only recognizes a common default-theme subset — a standard spacing scale, a small set of named palette colors, and common layout/typography properties — and has no awareness of any custom tailwind.config.js theme extensions your project might use. Arbitrary or complex values (gradients, custom shadows, unusual color values, calc() expressions, and so on) are not guessed; they're listed as unmapped so you can convert them by hand or express them with Tailwind's arbitrary-value syntax, e.g. bg-[#1a2b3c] orp-[18px].
Why are some colors matched to the wrong Tailwind shade?
Color matching only compares against the "500" shade of each named Tailwind color (plus black/white/transparent) using nearest-hex-distance, so an exact match isn't guaranteed — treat the suggested class as a starting point and adjust the shade number to match your design.
Is my CSS uploaded anywhere?
No — parsing and conversion happen entirely client-side in your browser. Nothing you paste is sent to a server.