Atomic CSS Devtools

A devtool panel for debugging Atomic CSS rules as if they were not atomic

Discover a better way to debug CSS with Atomic CSS Devtools. This powerful extension provides a unique approach to handling Atomic CSS rules by presenting them in a non-atomic format, making them easier to interpret and adjust.

It's a must-have for developers aiming to streamline their CSS troubleshooting and enhance site performance.

Installation

and other Chromium browsers

including Firefox Android

If you find this extension useful, please consider supporting it by giving it a star on GitHub or sharing it with your friends and colleagues.

And if you're feeling generous, here's my GitHub Sponsors page where you can support me directly.

Features

• https://twitter.com/astahmer_dev/status/1776919737999425629
• https://twitter.com/astahmer_dev/status/1777768741041750226
• https://twitter.com/astahmer_dev/status/1780207908195582010
• https://twitter.com/astahmer_dev/status/1785256449892880819
• https://twitter.com/astahmer_dev/status/1786371593070871022

Made with

This extension is built using:

• WXT (it's really awesome)
• Panda CSS
• Ark-ui
• Zag JS

Inspired by

• this tweet from @wesbos tbh (had a mvp the next day)
• Tailwind CSS devtools and Griffel devtools
• Hoverify / Tailscan for the custom element inspector feature

Contributing

Contributions are welcome! There's even a bunch of ideas in the TODO.md file.