Is there any tailwind to CSS converter available?

[GorvGoyl]

I found few CSS to tailwind converters like https://transform.tools/css-to-tailwind and https://tailwind-converter.netlify.app/ but is there any tool which provide the reverse?
Suppose, I put a div with tailwind classes and the tool spits out the standalone CSS. This CSS I can copy paste to other non-tailwind projects.
One more use case is designing emails, tailwind is my homie so I design with it and would love to get the output as classic old html and CSS.

can I do it easily in VSCode if there are no online tools as such?

[olets]

put a div with tailwind classes and the tool spits out the standalone CSS

The output of Tailwind is standalone CSS, so you could mock things up with Tailwind in a tool like https://play.tailwindcss.com/, Codepen, etc, and then copy the generated styles via the browser inspector (in those two examples it's in a style in the head in the iframe).

One more use case is designing emails

Additional work will need to be done for email, to inline styles where necessary and to not rely on custom properties.

[GorvGoyl]

Thanks. yes, inspecting dev tools is one way of doing it, but was hoping for some better solution if needed it often. I like the one @richardtallent mentioned about.

[richardtallent]

You could create a simple web project using Vue, React, or whatever with markup representing the various design tokens you want (buttons, headers, etc.), each with their own class. Use @apply within that project's CSS to compose the Tailwind classes into semantic classes. Then, just build that project and steal its CSS file from the dist folder.

This also gives you a way to tweak the styling later and easily test how it works with some sample content.

Free bonus: by using autoprefixer, etc., and a good browserlist setting, you can let PostCSS handle some of details of making those styles compatible with more email clients.

[GorvGoyl]

ah, liked this approach.

[raquel-f]

Hi! Little late to the party but I built a free online Tailwind CSS to CSS converter tool that does exactly this!

You can paste your HTML snippet with tailwind classes (full file or just the part you want), and it automatically converts those classes into plain CSS. It also updates your HTML with the new classes.

Totally free, no account, no payment, no tracking or storing of your information whatsoever. Saw that people were asking for something like this so I decided to create it myself, no strings attached. Hope it helps!

👉 Try it here: Tailwind to CSS Converter – Free Online Tool

For those curious on how it works, it uses Tailwind's own compiler to make sure the conversion works as intended every time. It creates a new class for each HTML element to accurately track responsiveness, focus, dark modes, etc.

[mehediScriptDev]

@raquel-f just solved this lol.

looks like there are a few ways to do it now.

1. the easy way: use the online tool raquel-f made. you just paste your html and it gives you back the css.
2. the manual way: build what you need in [tailwind play](https://play.tailwindcss.com/) and then just copy the css from the css panel.
3. the project way: set up a small project and use @apply to make your own classes, then just grab the final css file after you build it.

the new tool is the real fix tho.