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.