Using Tailwind code in Webflow

Most AI design tools write Tailwind: v0, Lovable, Bolt and often Claude and ChatGPT too. Webflow doesn't run Tailwind, so you can't use that markup as-is.

Why Tailwind classes do nothing in Webflow

A class like px-6 has no meaning on its own. Tailwind generates the CSS for it at build time (or in the browser with the CDN script). Webflow does neither, so if you rebuild the structure in Webflow and type the same class names, they have no styles.

Adding the Tailwind CDN script to Webflow's custom code doesn't really help either. The page might render, but the Designer shows unstyled elements, the Style panel is empty, and responsive variants like md:grid-cols-3 aren't Webflow breakpoints.

What the converter does with Tailwind

Compiles Tailwind in your browser with the official Tailwind v4 compiler, so every utility gets its real CSS.
Reads the final styles of each element at Webflow's four breakpoints. sm:, md: and lg: utilities become Tablet and Mobile styles in Webflow's desktop-first model.
Merges utilities into classes. Elements with the same final look share one class, named after the section and the element's role — pricing-heading, pricing-card, pricing-card-price, hero-button — instead of carrying fifteen utility names each.
Keeps states. hover: and focus: utilities become Webflow Hover and Focus states, with the transition.

The result is the class structure you would build by hand in Webflow, not a pile of one-off utilities. Because class names start with the section name, you can paste a hero, a features section and a pricing table one after another without their classes clashing.

Limits to know about

Tailwind v3 and v4. Code that loads the Play CDN (cdn.tailwindcss.com) is rendered with Tailwind v3, so v3 colors and defaults stay exactly as the author saw them. Everything else is compiled with Tailwind v4.
Custom themes. Custom colors, fonts, spacing, radii and shadows in a tailwind.config object, or in a v4 @theme block, are applied. Plugins and config values written as functions aren't — the report lists anything that was skipped.
Group and peer variants. group-hover: effects change child elements when the parent is hovered. Webflow needs Interactions for that, so the converter reports them instead of converting them.
Arbitrary values like w-[37rem] work, because they compile to normal CSS.

Try it with the Tailwind to Webflow converter.