Edit Tailwind visually. Ship utility classes.
Backdraft is a visual builder that works with your existing Tailwind project. Import your files, edit on a canvas, and every change writes back as Tailwind utility classes — not inline styles, not generated CSS.
Tailwind CSS
React
TypeScript
the problem
Tailwind is fast to write. Faster to see.
Tailwind's utility-first approach makes CSS faster to write. But you still cannot see the result without switching to a browser. And adjusting responsive classes across breakpoints means juggling sm:, md:, lg: prefixes in your head.
Backdraft puts your Tailwind code on a visual canvas. Select an element, change its padding — and the code updates from p-2 to p-4. Drag to resize — and the width class updates. Toggle a breakpoint — and you see exactly what md:flex-row looks like.
No generated code. No design tokens to sync. Your Tailwind classes are the visual properties.
compatibility
Tailwind v3 and v4. Both work.
Backdraft auto-detects your Tailwind version and loads the right engine.
Tailwind v3
- CDN with custom tailwind.config.ts injection
- Full JIT class support
- Custom theme colors, spacing, fonts
- Plugin support via config
Tailwind v4
NEW- @theme directive for design tokens
- @custom-variant for custom responsive/state variants
- @utility for custom utility definitions
- oklch() color functions
- Native CSS nesting (no PostCSS needed)
- Auto-detected via @theme, @utility, or oklch() patterns in your CSS
responsive
See every breakpoint simultaneously.
Most Tailwind tools show one breakpoint at a time. Backdraft shows all of them simultaneously on the canvas — xs through 2xl, side by side.
Select an element at the md breakpoint, change its layout from flex-col to flex-row, and see the result update live. The corresponding md:flex-row class is written back to your code.
No more guessing what lg:grid-cols-3 looks like. You can see it.
editing
Edit classes visually. Read them in code.
When you change a visual property on the canvas, Backdraft translates it to the correct Tailwind utility class.
Shorthand consolidation
Backdraft also consolidates shorthand automatically — if you set equal horizontal and vertical padding, px-4 py-4 becomes p-4.
theming
Toggle dark mode on the canvas.
Click the theme toggle and Backdraft sets class="dark" on the <html> element inside the canvas iframe. Every dark: prefixed class activates instantly.
Edit dark mode styles visually — change dark:bg-gray-900 to dark:bg-slate-950 by picking a color — and the class updates in your code. No separate stylesheet. No theme file to sync.
dark:bg-gray-900 → dark:bg-slate-950
what is different
What most Tailwind tools miss.
They start from templates
Most Tailwind builders give you a component library or template gallery. Backdraft opens the project you already have — your files, your structure, your classes.
They export, not sync
One-way export means editing the code breaks the connection. Backdraft syncs bidirectionally — edit the canvas or the code, changes flow both ways.
They skip React
Most Tailwind visual tools only work with plain HTML. Backdraft handles JSX/TSX with full component resolution, className merging, and children forwarding.
Open your Tailwind project.
See utility classes on a canvas. Edit them visually. Ship the same code.