A browser-based build tool for Tailwind CSS that lets you generate your Tailwind CSS output directly in the browser, no Node.js or build setup required.
- Build Tailwind CSS styles entirely in the browser
- No need for Node.js or any external build tools
- Works across multiple HTML pages
- Supports copying both unminified and minified CSS outputs
-
Add the scripts Include the two provided script tags on every page whose Tailwind classes you want to capture.
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdn.jsdelivr.net/npm/tailwindcss-browser-based-builder@latest/dist/tailwindcss-browser-based-builder.js" defer></script>
-
Capture Tailwind classes Once the scripts are added, start the capture process.
Visit each page that should contribute its Tailwind classes to the final stylesheet.
-
Export the CSS When you’re done capturing, click Copy CSS or Copy Minified CSS to copy the compiled Tailwind output.
-
This tool works best with static pages or sites where all Tailwind classes are already present in the DOM.
-
For highly dynamic web apps (that add or remove elements at runtime), some Tailwind classes may not be captured — since this tool only detects classes that exist in the DOM at capture time.
-
If your project dynamically injects new Tailwind classes, it’s recommended to:
- Use a proper Tailwind build setup (via Node.js), or
- Generate all possible class variants manually while capturing.
- Tailwind CSS v3
- Tailwind CSS v4
After including these on your pages, start the capture process in the browser interface, visit all relevant pages, and copy your generated CSS.
Works in all modern browsers that support ES modules.
MIT © Ma Px
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any problems, please file an issue along with a detailed description.