Tailwind → Webflow
Tailwind to Webflow, with real classes
Paste Tailwind markup and get native Webflow elements. Utilities like md:grid-cols-3, hover:bg-indigo-500 and space-y-4 become clean Webflow classes and breakpoints.
Runs in your browser. Your code is never uploaded.Get the Chrome extension →
How it works
- 1
Paste your code
Paste HTML with a <style> block, add separate CSS, or paste Tailwind markup. A whole page or a single section both work.
- 2
Convert and preview
We render your code in your browser, read the final styles at Webflow's four breakpoints, and rebuild them as clean, reusable classes. Compare the original and the result side by side.
- 3
Paste into Webflow
Click Copy to Webflow, open the Webflow Designer, select where the section should go and press ⌘V (Ctrl+V on Windows). You get native elements you can edit in the Style panel.
Why pasting Tailwind usually fails
Webflow doesn't run the Tailwind compiler, so pasted utility classes have no styles and the layout falls apart. We compile Tailwind in your browser first, then convert the result.
Breakpoints mapped for you
sm:, md: and lg: utilities are translated into Webflow's desktop-first breakpoints, so the mobile layout you wrote is the mobile layout you get.
Fewer, readable classes
Elements that share the same final styles share one class, named after their role — section, heading, button, grid — instead of a long string of utilities.
Chrome extension
Skip the ⌘V. Insert with one click.
- Insert sections straight into the Webflow Designer
- Capture a section from any page you’re viewing
- Keep recent conversions one click away