Tailwind to CSS converter

Paste HTML that uses Tailwind utility classes. The tool shows the exact CSS that Tailwind makes for those classes. The CSS includes responsive variants and hover variants. You can use the CSS without Tailwind.

HTML with Tailwind classes

Include base styles (preflight)

How to use it

Paste HTML that uses Tailwind classes.
Click Compile to CSS.
Copy the CSS.

How the tool works

The tool runs the real Tailwind compiler (v3) on your HTML. The tool processes arbitrary values (w-[37px]), variants (md:hover:) and an inline tailwind.config script the same as Tailwind does.

Do you want the result in Webflow?

You do not need the CSS step. FlowPaste compiles Tailwind and pastes the result directly as Webflow classes and breakpoints.

Questions

Which Tailwind version does it use?

The tool uses Tailwind CSS v3. The Tailwind Play CDN script and most AI tools make code for this version.

Does it include the reset (preflight)?

Only if you select Include base styles. Usually, you only need the utilities.

More free tools

HTML to Webflow converterConvert HTML and CSS to native Webflow elements on your clipboard.HEX to HSLA for WebflowConvert HEX, RGB and HSL colours to HSLA in the exact format that Webflow uses for swatches and variables.PX to REMConvert pixels to rem and rem to pixels with your root font size.Fluid clamp() generatorMake a CSS clamp() value that scales smoothly between 2 screen widths.