https://github.com/remcostoeten/react-tailwind-chrome-like-dev-tools

A React component for debugging and modifying CSS classes in real-time. Features include element inspection, selection, and adding predefined Tailwind CSS classes ("text-balance" and "text-pretty").
https://github.com/remcostoeten/react-tailwind-chrome-like-dev-tools

chrome-extension css react tailwindcss tool vite

Last synced: 3 months ago
JSON representation

A React component for debugging and modifying CSS classes in real-time. Features include element inspection, selection, and adding predefined Tailwind CSS classes ("text-balance" and "text-pretty").

• Host: GitHub
• URL: https://github.com/remcostoeten/react-tailwind-chrome-like-dev-tools
• Owner: remcostoeten
• Created: 2024-06-16T15:18:08.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T15:29:11.000Z (about 2 years ago)
• Last Synced: 2026-01-03T12:28:27.061Z (6 months ago)
• Topics: chrome-extension, css, react, tailwindcss, tool, vite
• Language: TypeScript
• Homepage: https://debug.remcostoeten.com
• Size: 504 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
A React component for debugging and modifying CSS classes in real-time. Features include element inspection, selection, and adding predefined Tailwind CSS classes (`"text-balance"` and `"text-pretty"`).

MVP is a Chrome debug-like tool which allows for (my initial thoughts): toggle `text-wrap: balance` vs `normal` vs `pretty` to see how it looks like in the browser. Could be a standalone npm package or a Chrome extension.

- `Shift + X` to toggle debugger

- `Shift + X` again to turn off debugger

- Click on an element to see its class name

- Click on an element to add a class to it

WiP and will probably be forgotten.