Build, design and debug your Tailwind website visually with TailwindCSS Studio, right within the browser.
TailwindCSS Studio Extension
- Live editing: Instantly see the result of every change you make.
- Autocompletion: Suggest the right classes for you as you type.
- Color preview: See the color of every class in the autocompletion view.
- Easy navigation: Hover over any element to see its Tailwind classes. Press Space to easily pin and edit the element.
- Persistence: Remember all your changes to every element so you can copy all changes at once!
- Automatic code update: Automatic synchronization with local code. support for code rollback, no need to worry about errors in code updates.
- Copy element class or html: Copy element class or html by one click.
Read more
- Autocompletion: Suggest the right classes for you as you type.
- Color preview: See the color of every class in the autocompletion view.
- Easy navigation: Hover over any element to see its Tailwind classes. Press Space to easily pin and edit the element.
- Persistence: Remember all your changes to every element so you can copy all changes at once!
- Automatic code update: Automatic synchronization with local code. support for code rollback, no need to worry about errors in code updates.
- Copy element class or html: Copy element class or html by one click.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "TailwindCSS Studio", "description": "Build, design and debug your Tailwind website visually with TailwindCSS Studio, right within the browser.", "version": "0.0.1.0", "version_name": "0.0.1", "manifest_version": 3, "action": { "default_popup": "src/popup/index.html" }, "background": { "service_worker": "service-worker-loader.js", "type": "module" }, "content_scripts": [ { "js": [ "assets/index.ts-loader-BUrLfVwL.js" ], "all_frames": true, "matches": [ "*://*/*" ], "run_at": "document_end", "css": [ "assets/index-BB6OXKCY.css" ] }, { "js": [ "assets/kodepayContent.ts-loader-BjWCHqZD.js" ], "matches": [ "https://kodepay.io/*", "https://fronted.kodepay.io/*" ], "run_at": "document_start" } ], "options_page": "src/options/index.html", "offline_enabled": true, "permissions": [ "storage", "background", "contextMenus" ], "web_accessible_resources": [ { "matches": [ "*://*/*" ], "resources": [ "src/content-script/index.ts", "src/content-script/iframe/index.html", "assets/utils-Dgo3jSMd.js", "assets/service-DJPasf0l.js", "assets/index.ts-Disnw9bg.js" ], "use_dynamic_url": false }, { "matches": [ "https://fronted.kodepay.io/*", "https://kodepay.io/*" ], "resources": [ "assets/kodepay.esm-D_8TzIMO.js", "assets/_commonjsHelpers-Cpj98o6Y.js", "assets/kodepayContent.ts-DnoHz2aY.js" ], "use_dynamic_url": false } ], "icons": { "16": "src/assets/logo.png", "24": "src/assets/logo.png", "32": "src/assets/logo.png", "128": "src/assets/logo.png" }}
Read more