https://github.com/astahmer/atomic-css-devtools

A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox
https://github.com/astahmer/atomic-css-devtools

atomic-css chrome devtools extension firefox panda stylexjs tailwindcss

Last synced: 3 days ago
JSON representation

A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox

• Host: GitHub
• URL: https://github.com/astahmer/atomic-css-devtools
• Owner: astahmer
• Created: 2024-04-06T23:42:48.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-10-19T17:05:11.000Z (3 months ago)
• Last Synced: 2025-01-13T11:04:08.978Z (10 days ago)
• Topics: atomic-css, chrome, devtools, extension, firefox, panda, stylexjs, tailwindcss
• Language: TypeScript
• Homepage: https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc
• Size: 11.8 MB
• Stars: 335
• Watchers: 4
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
## Atomic CSS Devtools

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

![](/demo.gif)

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

[link-chrome]: https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc 'Version published on Chrome Web Store'

[link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/atomic-css-devtools/ 'Version published on Mozilla Add-ons'

[][link-chrome] [][link-chrome] and other Chromium browsers

[][link-firefox] [][link-firefox] 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](https://github.com/sponsors/astahmer) 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](https://wxt.dev/) (it's really awesome)

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

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

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

## Inspired by

- [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)

## Contributing

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

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