KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #codex #typescript #ai-agents #claude-code #dsh #dsh-plugin #open-source #cli #deepseek-harness #macos #ai-agent

atomic-css-devtools

★ 436 Open GitHub ↗

A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox. Works with TailwindCSS, Panda CSS, and any atomic CSS library

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

![](https://raw.githubusercontent.com/astahmer/atomic-css-devtools/main/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'

[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg" width="48" alt="Chrome" valign="middle">][link-chrome] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/cbjhfeooiomphlikkblgdageenemhpgc.svg?label=%20">][link-chrome] and other Chromium browsers

[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/firefox/firefox.svg" width="48" alt="Firefox" valign="middle">][link-firefox] [<img valign="middle" src="https://img.shields.io/amo/v/atomic-css-devtools.svg?label=%20">][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.

atomic-css-devtools

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README