ajdicooaaonopdddcobbbmoojealpelf
Build, design and debug your Tailwind website visually with TailwindCSS Studio, right within the browser. - π Live editing: Instantly see the result of every change you make. - βοΈ Autocompletion: Suggest the right classes for you as you type. - π§ Color preview: See the color of every class in the autocompletion view. - β¬ οΈ Easy navigation: Hover over any element to see its Tailwind classes. Press Space to easily pin and edit the element. - π Persistence: Remember all your changes to every element so you can copy all changes at once! - π‘ Automatic code update: Automatic synchronization with local source code. support for code rollback, no need to worry about errors in code updates. - π Copy element class or html: Copy element class or html by one click.
TailwindSight β Inspect & Edit Tailwind CSS in Real-Time
Instantly inspect, view, and modify Tailwind CSS classes on any webpage with live suggestions and undo/redo support. TailwindSight lets you inspect and modify Tailwind CSS classes directly on any webpage β in real time. Debug, experiment, and learn faster by editing Tailwind classes visually without switching between your browser and code editor. What It Does - TailwindSight shows all Tailwind CSS classes applied to any element on a webpage. Click an element to view, add, or remove classes β and see the result instantly. Includes autocomplete, validation, and conflict detection to make Tailwind debugging effortless. Why You Should Install It- β Debug Faster: Instantly see which Tailwind classes are applied to any element without inspecting code β Experiment Freely: Try different classes and see results immediately before updating your source code β Learn Tailwind: Explore how real websites use Tailwind classes and understand class combinations β Save Time: No more switching between browser DevTools and your code editor β Avoid Mistakes: Real-time validation prevents invalid class names and shows conflicts β Advanced Features: Get conflict detection, undo/redo, and active/inactive indicators that help you understand what's actually working β Live Editing Add or remove Tailwind classes with instant visual feedback. Changes apply immediately so you can experiment and iterate quickly. β Smart Autocomplete Type any partial class name and get intelligent suggestions. Autocomplete shows valid Tailwind classes, making it faster to find what you need. β Class Validation The extension validates every class in real-time. Invalid classes are highlighted with clear error messages, preventing typos and mistakes. β Conflict Detection See which classes are active (green dot β) versus inactive/overridden (gray dot β). When you have conflicting classes like md:text-3xl and md:text-4xl, TailwindSight shows which one actually applies. β Undo/Redo Full history tracking lets you undo and redo changes. Experiment without worry - you can always revert back. β Copy to Clipboard One-click copy of all classes makes it easy to transfer your changes to your source code. Supports All Tailwind Patterns- β’ Responsive variants (md:, lg:, etc.) β’ State variants (hover:, focus:, dark:) β’ Arbitrary values (text-[#1da1f2], w-[137px]) β’ Important modifiers (!text-center, !hidden) β’ Combined modifiers (md:hover:text-4xl) β’ Opacity and color modifiers (bg-black/50, text-gray-600/90) Perfect For- β’ Frontend developers debugging Tailwind CSS layouts β’ Designers prototyping interfaces with Tailwind β’ Developers learning Tailwind CSS by example β’ Teams collaborating on Tailwind projects How It Works- 1. Click the TailwindSight icon in your browser toolbar 2. Click "Start Inspecting" 3. Click any element on the webpage 4. View classes, add new ones, or remove existing ones 5. Changes apply instantly on the page Privacy & Permissions- TailwindSight does not collect any data. All operations happen locally in your browser. No browsing history, personal information, or usage data is collected, stored, or transmitted. Your privacy is completely protected. The extension only requires permissions to interact with webpages you're actively working on. No background tracking or data collection occurs. Technical Details- β’ Works with all versions of Tailwind CSS β’ Manifest V3 compliant (secure and lightweight)t β’ Compatible with Chrome 88+ β’ No external dependencies or libraries
Tifoo β Effortless Tailwind Styling
Streamline your Tailwind CSS development with real-time inspection and intuitive class managementβright in your browser. π Key Features β’ Real-time Element Inspection - Hover to view Tailwind classes β’ Visual Class Editor - Intuitive interface for adding/removing classes β’ Basic Class Autocompletion - Get Tailwind class suggestions while typing β’ One-click Copy - Quickly copy elements or their classes β’ Draggable Interface - Flexibly adjust tool window position β’ Zero Configuration - Start using immediately after installation β’ Multi-tab Support - Work with multiple pages simultaneously β’ Most Comprehensive Library - Access to 140,000+ ready-to-use Tailwind classes β’ Smooth Animations - Fluid transitions and visual feedback β’ Regular Updates - Stay current with latest Tailwind CSS features π― Works where you develop Tifoo works seamlessly across any webpage using Tailwind CSSβno setup required. Whether you're working on: β’ Personal projects β’ Company websites β’ Web applications β’ And any site using Tailwind CSS! π¨βπ» Built for Developers, by Developers "Tifoo streamlines Tailwind CSS development by providing the tools developers actually need, right in the browser." π Free and Open Source Tifoo is completely free and open source. We believe in community-driven development to create tools that truly serve developers' needs. π Active Community Support β’ Regular contributions from developers worldwide β’ Quick bug fixes and feature implementations β’ Extensive documentation and community support β’ Growing ecosystem of plugins and extensions If you encounter any issues or have suggestions, please submit an issue on our GitHub repository. We will respond to your needs as soon as possible.
Tailwind CSS Devtools
All-in-one browser extension for Tailwind CSS Developer. Features π₯ π Quickly inspect edit and filter HTML elements with TailwindCSS utility classes. β¨ Support Tailwindcss Intellisense autocompletion for JIT mode. βοΈ Custom config support. Personal data π Tailwind CSS Devtools had never collected and will never collect any personal data, browsing history, etc. Tailwind CSS Devtools also doesn't share/care about your data at all.
Tailwind CSS Scanner
The fastest, cleanest, easiest way to scan edit and copy tailwind components Tailwind Scanner is the fastest way to inspect and edit tailwind css. Ditch Inspect element forever for this cleaner UI. Visualize the css of any element and copy its entire css rules with a single click. Then edit on the fly and export elements to tailscan. If you have any feature requests or improvements you'd like to see, please let us know! Try the extension out yourself at: https://tailwindscanner.com/
