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.
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.
- 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:
- 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.