This template should help get you started developing with React in WXT.

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

[Download here on the chrome store](https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc)

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](https://github.com/sponsors/astahmer) 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)

This extension is built using:

-[WXT](https://wxt.dev/) (it's really awesome)

-[Panda CSS](https://panda-css.com/)

-[Ark-ui](https://ark-ui.com/)

-[Zag JS](https://zagjs.com/)

-[this tweet from@wesbos tbh](https://twitter.com/wesbos/status/1776269438850892182)

(had a mvp

[the next day](https://twitter.com/astahmer_dev/status/1776685925029892270))

-[Tailwind CSS devtools](https://github.com/Tailscan/tails-devtools) and

[Griffel devtools](https://chromewebstore.google.com/detail/griffel-devtools/bejhagjehnpgagkaaeehdpdadmffbigb)

-[Hoverify](https://tryhoverify.com/) /[Tailscan](https://tailscan.com/) for

[the custom element inspector feature](https://twitter.com/astahmer_dev/status/1786371593070871022)

Contributions are welcome! There's even a bunch of ideas in the

[TODO.md](./TODO.md) file.

note for anyone curious: I had those notes when the project was still private 😅

hence the little mess

- (ElementInspector) -> add atomic classes Declarations (like in the devtools

panel)https://www.tryhoverify.com/