Tailwind ↔ CSS Converter 🎨

Understanding CSS to Tailwind Conversion

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.

• Standard CSS: Requires writing custom class names and separate stylesheet files. You define rules like margin-top: 1rem;.
• Tailwind CSS: Provides predefined utility classes. The equivalent of margin-top: 1rem; is simply mt-4 (assuming default config where 1 unit = 0.25rem).

How the Converter Works

CSS to Tailwind

When pasting standard CSS, the converter parses the properties and values, attempting to map them to the closest Tailwind equivalent. It handles common properties:

• Layout & Flexbox: display, flex-direction, align-items, justify-content.
• Spacing: margin and padding are converted using Tailwind's default spacing scale (e.g., 1rem becomes 4).
• Typography: font-size, font-weight, text-align.
• Colors: Basic colors mapping and arbitrary values (e.g., bg-[#123456]).

Tailwind to CSS

When pasting Tailwind classes (space-separated), the tool reverses the process, generating standard CSS properties. It expands shorthands and respects standard Tailwind scales. Arbitrary values like w-[100px] are translated cleanly to width: 100px;.

Limitations & Tips

• Complex nested CSS selectors or media queries are not fully supported in simple conversion; stick to single-element declarations.
• Tailwind uses a specific spacing scale. Exact pixel values in standard CSS might be mapped to Tailwind's arbitrary value syntax (e.g., w-[45px]) if they don't cleanly match the scale.
• This tool runs entirely offline in your browser. All conversions happen instantly on your device without sending code to any server.