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

Download here on the chrome store

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.

Discover a better way to debug CSS with "Atomic CSS Devtools." This powerful Chrome 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.

(thanks gpt for the description)

• 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

This extension is built using:

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

• 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

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