tailwind-extractor logo

tailwind-extractor

Tailwind → compiled CSS · runs entirely in the browser
Ready — drop files here or click the upload zone
💡 If left empty — defaults to @import "tailwindcss" (v4) or standard directives (v3)
💡 Custom colours, fonts, and theme tokens will be included in the generated CSS
💡 Works without files too — just paste your code and hit Extract CSS
Build mode
1
Scan
2
iframe render
3
Collect CSS
4
Clean up
output.css

Why tailwind-extractor?

🔒
100% Private
All processing happens in your browser. Your source code never leaves your device.
v3 & v4 Support
Auto-detects your Tailwind version. Manually override to v3 or v4 when needed.
🗂
Multi-file Batch
Drop an entire component library at once. Processes HTML, JS, TS, JSX, TSX, Vue, Svelte, and PHP.
🎨
Custom Config
Paste your tailwind.config and input.css to include custom colours, tokens, and layers.
📋
Copy or Download
One-click copy to clipboard or download as output.css ready to use.
🔍
Smart Scanning
Detects classes in class=, className=, cn(), clsx(), and cva() patterns.