A free, browser-based tool that compiles and extracts production-ready CSS from any Tailwind project — no build tools, no server, no uploads.
tailwind-extractor is a client-side utility that scans your source files — HTML, JS, TS, JSX, TSX, Vue, Svelte, or PHP — for Tailwind CSS class names, renders them through Tailwind's browser CDN in a sandboxed iframe, and captures the resulting compiled CSS. The output is clean, deduplicated, and ready to drop into any project.
It works with both Tailwind v3 and v4, auto-detects your version, and respects your custom tailwind.config and input.css.
Running a full Node.js build pipeline just to generate CSS is heavy — especially when prototyping, sharing demos, or working on a static site. We wanted a tool that does exactly one thing extremely well: take your Tailwind-annotated source and hand you back the CSS, instantly, without installing anything.
Zero data leaves your machine. No accounts. No rate limits. Just open the page and start dropping files.
tailwind-extractor reads your files client-side and scans for Tailwind class names using regex patterns that cover class=, className=, cn(), clsx(), and cva().
It builds a minimal synthetic HTML page that places each unique class on a <div>, then loads Tailwind's browser CDN inside a hidden iframe. Tailwind generates the CSS for exactly those classes.
Once the stylesheet is ready, the tool reads every CSS rule, deduplicates them, strips browser noise, and assembles the final output.css — which you can copy or download in one click.
We welcome questions, feedback, and collaboration proposals. We usually reply within 48 hours on business days. For urgent matters, use email.