{"id":32791838,"url":"https://github.com/ma-px/tailwindcss-browser-based-builder","last_synced_at":"2026-05-15T11:36:19.542Z","repository":{"id":319690371,"uuid":"1079338537","full_name":"ma-px/tailwindcss-browser-based-builder","owner":"ma-px","description":"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.","archived":false,"fork":false,"pushed_at":"2025-10-19T16:15:57.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-20T00:25:49.080Z","etag":null,"topics":["build","build-tool","builder","builder-tools","tailwind","tailwindcss-v3","tailwindcss-v4","tainwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ma-px.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-19T15:57:23.000Z","updated_at":"2025-10-19T16:19:24.000Z","dependencies_parsed_at":"2025-10-20T00:25:52.237Z","dependency_job_id":"bca1a832-f917-45f4-9146-e71fb286a66f","html_url":"https://github.com/ma-px/tailwindcss-browser-based-builder","commit_stats":null,"previous_names":["ma-px/tailwindcss-browser-based-builder"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ma-px/tailwindcss-browser-based-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ma-px%2Ftailwindcss-browser-based-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ma-px%2Ftailwindcss-browser-based-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ma-px%2Ftailwindcss-browser-based-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ma-px%2Ftailwindcss-browser-based-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ma-px","download_url":"https://codeload.github.com/ma-px/tailwindcss-browser-based-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ma-px%2Ftailwindcss-browser-based-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282831701,"owners_count":26734536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-05T02:00:05.946Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build","build-tool","builder","builder-tools","tailwind","tailwindcss-v3","tailwindcss-v4","tainwindcss"],"created_at":"2025-11-05T14:01:39.908Z","updated_at":"2025-11-05T14:01:43.948Z","avatar_url":"https://github.com/ma-px.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-browser-based-builder\n\nA **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.\n\n---\n\n## 🚀 Features\n\n* Build Tailwind CSS styles entirely in the browser\n* No need for Node.js or any external build tools\n* Works across multiple HTML pages\n* Supports copying both **unminified** and **minified** CSS outputs\n\n---\n\n## 🧩 Usage\n\n1. **Add the scripts**\n   Include the two provided script tags on every page whose Tailwind classes you want to capture.\n\n    ```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/tailwindcss-browser-based-builder@latest/dist/tailwindcss-browser-based-builder.js\" defer\u003e\u003c/script\u003e\n    ```\n\n2. **Capture Tailwind classes**\n   Once the scripts are added, start the capture process.\n\n   \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/ma-px/tailwindcss-browser-based-builder/refs/heads/main/images/screenshot-1.png\" alt=\"Tailwind Builder UI\" width=\"600\"\u003e\n   \u003c/p\u003e\n  \n   Visit each page that should contribute its Tailwind classes to the final stylesheet.\n\n3. **Export the CSS**\n   When you’re done capturing, click **Copy CSS** or **Copy Minified CSS** to copy the compiled Tailwind output.\n   \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/ma-px/tailwindcss-browser-based-builder/refs/heads/main/images/screenshot-2.png\" alt=\"Tailwind Builder UI\" width=\"600\"\u003e\n   \u003c/p\u003e\n\n---\n\n## ⚠️ Important Notes\n\n* This tool works **best with static pages** or sites where all Tailwind classes are already present in the DOM.\n* 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.\n* If your project dynamically injects new Tailwind classes, it’s recommended to:\n\n  * Use a proper Tailwind build setup (via Node.js), or\n  * Generate all possible class variants manually while capturing.\n\n---\n\n## 🧠 Supported Tailwind CSS Versions\n\n* Tailwind CSS **v3**\n* Tailwind CSS **v4**\n\n---\n\n## 📝 Example\n\nAfter including these on your pages, start the capture process in the browser interface, visit all relevant pages, and copy your generated CSS.\n\n---\n\n## Browser Support\n\nWorks in all modern browsers that support ES modules.\n\n## License\n\nMIT © Ma Px\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Issues\n\nIf you encounter any problems, please file an issue along with a detailed description.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fma-px%2Ftailwindcss-browser-based-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fma-px%2Ftailwindcss-browser-based-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fma-px%2Ftailwindcss-browser-based-builder/lists"}