CSS to Tailwind
Convert traditional CSS to Tailwind utility classes. Free, in your browser.
What it's for
Migrate your CSS to utility-first with Tailwind
Compatible with Tailwind v3 and v4
Generated classes are compatible with modern versions of Tailwind CSS and the JIT engine for arbitrary values.
100% private
Your CSS is processed in the browser. Never sent to servers. Ideal for converting proprietary project styles.
Precise equivalences
Faithful mapping between CSS properties and Tailwind classes, with arbitrary values for properties without an exact equivalent.
Instant
Real-time conversion. Paste your CSS and Tailwind classes appear instantly.
How it works
Three steps, no hassle
Paste your CSS
Enter the CSS block you want to convert. It can be a selector with its properties or multiple CSS rules.
Get the equivalent Tailwind classes
The tool maps each CSS property to its closest Tailwind utility class. Properties without a direct equivalent are shown as arbitrary values using bracket syntax.
Copy the classes and apply them in your HTML
Copy the generated classes directly into your HTML element's class attribute. Compatible with Tailwind CSS v3 and v4.
FAQ
Got questions?
Tailwind CSS is a utility-first CSS framework created by Adam Wathan and released in 2017. Instead of pre-designed CSS components like Bootstrap, Tailwind provides low-level utility classes (like `flex`, `pt-4`, `text-gray-700`) composed directly in HTML. This eliminates the need to write custom CSS for most styles and promotes design consistency.
The tool converts most common CSS properties: layout (display, flexbox, grid, position), spacing (margin, padding), typography (font-size, font-weight, line-height, color), backgrounds, borders, shadows, opacity, and more. Properties without an exact Tailwind equivalent are expressed using Tailwind's arbitrary value syntax, like `w-[123px]` or `bg-[#1a2b3c]`.
Tailwind includes an arbitrary value system that allows any CSS value inside brackets: `w-[37px]`, `text-[#ff6600]`, `grid-cols-[1fr_2fr_1fr]`. This means any CSS property can be expressed in Tailwind even without a predefined class for that exact value. Arbitrary values are compiled by Tailwind's JIT (Just-In-Time) engine and only included in the final CSS if used.
This tool converts base CSS properties without state variants. Pseudo-selectors like :hover, :focus, :active and media queries are expressed in Tailwind with prefixes like `hover:`, `focus:`, `md:`, `lg:`. For CSS with complex states, the result can serve as a starting point to which you manually add the necessary variant prefixes.
Avoid converting when CSS has complex animations with @keyframes, uses experimental or vendor-specific properties without Tailwind support, when the project doesn't use Tailwind and adding it would be a major architectural change, or when CSS is already well-organized with BEM or CSS Modules and the team prefers that methodology. Tailwind shines in new projects or complete redesigns.
Tailwind CSS adoption 2020-2026: utility-first vs semantic CSS and migration strategies
Tailwind CSS was created by Adam Wathan and Steve Schoger, publicly released in 2017. Version 1.0 arrived in 2019, v2 in November 2020 with dark mode and JIT (initially as a plugin), and v3 in December 2021 with JIT built in by default. V4 (2024-2025) rewrote the engine in Rust for even faster compilation. Tailwind became the most downloaded CSS library on npm, surpassing Bootstrap.
The utility-first vs semantic CSS debate is one of the most active in the frontend community. Critics argue Tailwind mixes structure and presentation in HTML (contrary to separation of concerns), that HTML with many Tailwind classes is hard to read, and that generated CSS can be large without proper purging. Proponents argue it eliminates the CSS class naming problem, makes design more consistent, and simplifies maintenance by colocating styles with markup.
Migrating existing projects from traditional CSS or Bootstrap to Tailwind is a gradual process. Common strategies include component-by-component migration, using @apply to preserve CSS file separation during transition, and adopting Tailwind only for new components while maintaining legacy CSS. Tools like this converter ease the initial migration phase by automating the translation of existing CSS properties to their Tailwind equivalent.