DivCopy is a lightweight browser extension that allows developers to hover over any element, instantly view its Tailwind classes or computed CSS styles(tailwind also), and copy them directly to the clipboard.
Designed to save development time by eliminating the need to manually dig through browser DevTools.
- Hover to Inspect: View Tailwind classes or CSS styles on any website simply by hovering over elements.
- One-click Copy: Quickly copy Tailwind class names or inline CSS styles for immediate use.
- Lightweight and Fast: Minimal interface for maximum efficiency without slowing down the browser.
- Smart Detection: Automatically identifies Tailwind classes, inline styles, or computed styles.
- Cross-Site Compatibility: Works on any website, regardless of the technology stack.
- Download the extension folder or ZIP file.
- Open your browser’s Extensions page.
- Enable "Developer Mode."
- Click "Load Unpacked" and select the DivCopy folder.
- The extension is now ready to use.
- Activate: Click the floating DivCopy button.
- Hover: Elements get outlined and inspected.
- Click: Instantly copy HTML + CSS to clipboard (tailwind also).
- Deactivate: Click the button again.
- Language: Vanilla JavaScript
- Architecture: Lightweight, performance-focused
- Design: Minimalistic and intuitive
Contributions, ideas, and suggestions are welcome.
Please open an issue or submit a pull request if you would like to collaborate.
This project is licensed under the MIT License.
Because copying just the HTML isn't enough.
DivCopy gives you the full picture — HTML structure + CSS styles — so you can replicate components instantly. (tailwind also)