{"id":18582976,"url":"https://github.com/astahmer/atomic-css-devtools","last_synced_at":"2025-05-16T12:09:49.607Z","repository":{"id":258382452,"uuid":"783096693","full_name":"astahmer/atomic-css-devtools","owner":"astahmer","description":"A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome \u0026 firefox. Works with TailwindCSS, Panda CSS, and any atomic CSS library","archived":false,"fork":false,"pushed_at":"2024-10-19T17:05:11.000Z","size":12373,"stargazers_count":366,"open_issues_count":6,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T08:09:47.190Z","etag":null,"topics":["atomic-css","chrome","devtools","extension","firefox","panda","stylexjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/astahmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["astahmer"]}},"created_at":"2024-04-06T23:42:48.000Z","updated_at":"2025-03-21T22:52:40.000Z","dependencies_parsed_at":"2024-11-14T01:01:22.369Z","dependency_job_id":null,"html_url":"https://github.com/astahmer/atomic-css-devtools","commit_stats":null,"previous_names":["astahmer/atomic-css-devtools"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astahmer%2Fatomic-css-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astahmer%2Fatomic-css-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astahmer%2Fatomic-css-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/astahmer%2Fatomic-css-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/astahmer","download_url":"https://codeload.github.com/astahmer/atomic-css-devtools/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018050,"owners_count":21034047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-css","chrome","devtools","extension","firefox","panda","stylexjs","tailwindcss"],"created_at":"2024-11-07T00:18:01.985Z","updated_at":"2025-04-09T10:03:23.566Z","avatar_url":"https://github.com/astahmer.png","language":"TypeScript","readme":"## Atomic CSS Devtools\nA devtool panel for debugging Atomic CSS rules as if they were not atomic\n\n![](/demo.gif)\n\nDiscover a better way to debug CSS with Atomic CSS Devtools. This powerful extension provides a unique approach to handling Atomic CSS rules by\npresenting them in a non-atomic format, making them easier to interpret and\nadjust.\n\nIt's a must-have for developers aiming to streamline their CSS\ntroubleshooting and enhance site performance.\n\n## Installation\n[link-chrome]: https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc 'Version published on Chrome Web Store'\n[link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/atomic-css-devtools/ 'Version published on Mozilla Add-ons'\n\n[\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg\" width=\"48\" alt=\"Chrome\" valign=\"middle\"\u003e][link-chrome] [\u003cimg valign=\"middle\" src=\"https://img.shields.io/chrome-web-store/v/cbjhfeooiomphlikkblgdageenemhpgc.svg?label=%20\"\u003e][link-chrome] and other Chromium browsers\n\n[\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/firefox/firefox.svg\" width=\"48\" alt=\"Firefox\" valign=\"middle\"\u003e][link-firefox] [\u003cimg valign=\"middle\" src=\"https://img.shields.io/amo/v/atomic-css-devtools.svg?label=%20\"\u003e][link-firefox] including Firefox Android\n\nIf you find this extension useful, please consider supporting it by giving it a\nstar on GitHub or sharing it with your friends and colleagues.\n\nAnd if you're feeling generous, here's my\n[GitHub Sponsors page](https://github.com/sponsors/astahmer) where you can\nsupport me directly.\n\n## Features\n\n- https://twitter.com/astahmer_dev/status/1776919737999425629\n- https://twitter.com/astahmer_dev/status/1777768741041750226\n- https://twitter.com/astahmer_dev/status/1780207908195582010\n- https://twitter.com/astahmer_dev/status/1785256449892880819\n- https://twitter.com/astahmer_dev/status/1786371593070871022\n\n## Made with\n\nThis extension is built using:\n\n- [WXT](https://wxt.dev/) (it's really awesome)\n- [Panda CSS](https://panda-css.com/)\n- [Ark-ui](https://ark-ui.com/)\n- [Zag JS](https://zagjs.com/)\n\n## Inspired by\n\n- [this tweet from @wesbos tbh](https://twitter.com/wesbos/status/1776269438850892182)\n  (had a mvp\n  [the next day](https://twitter.com/astahmer_dev/status/1776685925029892270))\n- [Tailwind CSS devtools](https://github.com/Tailscan/tails-devtools) and\n  [Griffel devtools](https://chromewebstore.google.com/detail/griffel-devtools/bejhagjehnpgagkaaeehdpdadmffbigb)\n- [Hoverify](https://tryhoverify.com/) / [Tailscan](https://tailscan.com/) for\n  [the custom element inspector feature](https://twitter.com/astahmer_dev/status/1786371593070871022)\n\n## Contributing\n\nContributions are welcome! There's even a bunch of ideas in the\n[TODO.md](./TODO.md) file.\n","funding_links":["https://github.com/sponsors/astahmer"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastahmer%2Fatomic-css-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fastahmer%2Fatomic-css-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fastahmer%2Fatomic-css-devtools/lists"}