Repository files navigation

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 bypresenting them in a non-atomic format, making them easier to interpret andadjust.

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

and other Chromium browsers

including Firefox Android

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

And if you're feeling generous, here's myGitHub Sponsors page where you cansupport me directly.

• 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 mvpthe next day)
• Tailwind CSS devtools andGriffel devtools
• Hoverify /Tailscan forthe custom element inspector feature

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