DevStyle Extractor

Hi all!

As a young full-stack developer, I got tired of digging through massive browser dev-tools panels just to copy simple component layouts or figure out typography styles. To fix this, I spent the last week building and polishing DevStyle Extractor—a lightweight, free browser extension designed to accelerate UI workflows.

What it does:

• Hover to Inspect & Click to Copy: Move your mouse over any element on a webpage to instantly view and copy its raw HTML, CSS, or isolated typography styles.

• Multi-Version Tailwind Converter: Instantly transform standard CSS properties into utility classes targeting Tailwind CSS v2, v3, or v4.

• Responsive Test View: Quickly preview layouts across multiple device screen sizes directly from the extension popup.

• Component Sandbox: Export your inspected layouts into a clean development environment or auto-generate a page-wide color palette.

I originally thought about putting features behind a paywall, but I decided developers deserve high-quality utility tools for free. The project is fully public and source-available on GitHub under a non-commercial license (CC BY-NC 4.0) so anyone can use it or learn from the code.

We also just launched on Product Hunt today! I would absolutely love to get your feedback, feature requests, or bug reports so I can keep improving it.

• GitHub Repository: If it helped you in any way, please consider giving the project a star so that more frontend developers can find this tool!

Thank you so much for checking it out!

Here's a screenshot: