About Tailwind → CSS

Convert Tailwind CSS classes to vanilla CSS properties. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

• Learning CSS equivalents of unfamiliar Tailwind utility classes
• Converting Tailwind components to vanilla CSS during framework migration
• Generating CSS snippets for email templates that cannot use Tailwind
• Debugging Tailwind styles by inspecting the underlying CSS output

Tips

• Paste Tailwind classes to see the generated CSS properties
• Use this to learn what each utility class does under the hood
• Convert component styles when migrating away from Tailwind

Fun Facts

• Tailwind CSS was created by Adam Wathan and released in November 2017, pioneering the utility-first CSS methodology.
• Tailwind CSS v3.0 introduced Just-in-Time compilation by default, reducing build times from minutes to milliseconds.
• Despite initial skepticism, Tailwind became the most popular CSS framework on GitHub by 2023, surpassing Bootstrap in stars.

FAQ

Why convert?

Debugging 'what does this Tailwind class actually do?' or exporting Tailwind components to a codebase that doesn't use Tailwind.

Is the output production-ready?

The CSS is valid. For production, use Tailwind's build process which purges unused styles — this tool converts for understanding, not for deployment.

Arbitrary values?

Yes — `w-[calc(100%-2rem)]` becomes `width: calc(100% - 2rem)`. Handles every Tailwind class including custom theme tokens.

Which Tailwind version?

v3.x including container queries. v4 is stabilizing as of 2026; check the tool's notes if you're on v4.