CSS to Tailwind Converter [2025]

This tool attempts to parse standard CSS rules and map the declared properties and values to their closest equivalents in the default Tailwind CSS utility class system. For example, `color: red;` might become `text-red-500`, and `margin-top: 16px;` might become `mt-4`.

It handles common properties like `display`, `color`, `background-color`, basic `padding`/`margin`, `font-weight`, `font-size`, `border-radius`, `text-align`, and `opacity`. It also attempts to translate simple `:hover`, `:focus`, and `@media (min-width: ...)` rules into Tailwind prefixes like `hover:`, `focus:`, and `md:`.

However, this conversion is inherently limited:

• Default Theme Only: It assumes Tailwind's default theme (colors, spacing, breakpoints). It won't know about your custom `tailwind.config.js`.
• Simple Selectors: It primarily looks at declarations within rules and basic pseudo-classes/media queries. Complex CSS selectors (descendants, children, attribute selectors) cannot be directly translated to utility classes applied to single elements.
• Complex Values: CSS functions like `calc()`, `var()`, complex `linear-gradient()`, multi-step `box-shadow`, or intricate `transform` values are generally not convertible by this basic tool.
• Context Matters: Tailwind classes are applied directly to HTML elements. This tool only provides the classes; you need to apply them to the correct elements in your HTML structure.
• Approximation: The output is often a starting point or an approximation. You will likely need to review and refine the generated classes.

Use this tool for simple snippets, learning Tailwind equivalents, or getting a head start on migrating basic styles. For complex CSS or production migrations, manual conversion or more sophisticated build-time tools are recommended.

1. Paste CSS: Enter or paste your CSS code into the "Input CSS" text area.
2. Click Convert: Press the "Convert to Tailwind" button.
3. Review Output: The generated Tailwind utility classes will appear in the "Output Tailwind Classes" text area.
4. Check Notes/Errors: If the tool encountered properties it couldn't map or other issues, notes or error messages might appear below the output. Unmapped properties will often be included as comments (`/* ... */`) in the output.
5. Copy Classes: Click the "Copy Classes" button to copy the generated Tailwind string.
6. Apply to HTML: Paste the copied classes into the `class="..."` attribute of the relevant HTML elements in your project. Remember to adapt based on your HTML structure, as the tool doesn't translate CSS selector logic.
7. Refine: Adjust the classes as needed based on your specific design requirements and Tailwind configuration.