gmkelackgnfbjcgakhoiknelbgmeeiaa
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
Page Marker - Draw on Web
Draw or highlight on any website in real time. Add text, lines, and shapes. Move, undo, or redo anything you draw. Draw on any website, add text, add lines, and highlight! With Page Marker, you can use your mouse or touchscreen to draw on the web or on PDFs and save it to your computer. Paint, draw, and mark on any webpage or website. Instructions: 1. Click the puzzle piece-shaped extensions icon in the top right corner of your browser. Pin the Page Marker red marker icon for ease of access. 2. Begin drawing on any webpage with your mouse or touchscreen. 3. To change the color of the marker, click on the color selecting box. 4. To change thickness, use the size slider. 5. Use the highlighter tool to highlight lines of text. 6. Use the eraser tool to erase parts of your drawing. 7. Use the text tool to add text to the website. 8. Use the line tool to draw straight lines. 9. To undo or redo, click the corresponding undo/redo buttons. 10. Change the default color or thickness in the options menu when you right click the Page Marker icon.
Tail Lens for Tailwind: Inspect, Edit, and Build Tailwind CSS Visually
Inspect. Edit. Build. Tailwind, right in your browser. Tail Lens is a developer-focused Chrome extension that works like devtools for Tailwind CSS. It is a Tailwind CSS inspector and visual class editor that helps you inspect Tailwind classes, debug Tailwind layouts, and speed up your frontend workflow. Inspect any element, see all its Tailwind utility classes at a glance, try class alternatives with live preview, and copy the final Tailwind class list in one click. No more digging through browser devtools, guessing which Tailwind CSS utility is affecting your layout, or constantly switching between editor and browser. Tail Lens turns Chrome into powerful Tailwind devtools so you can build, refactor, and debug Tailwind CSS faster. Works great with React, Next.js, Vue, Svelte, Laravel and any project using Tailwind CSS. 🔁 Smart Tailwind class alternatives - Instantly view and switch between Tailwind utility class alternatives. Get intelligent Tailwind suggestions based on your current classes, layout, and Tailwind config. 🔍 Search and preview any Tailwind CSS class - Search any Tailwind CSS class, including classes from your custom tailwind.config. - Hold Alt to preview a Tailwind class on hover directly in the page. Apply the class with a single click and see Tailwind changes instantly, without reloading. ⚡Live Tailwind class preview on hover - Hover over alternatives like flex, flex-col, items-center, gap-4, px-6, etc. Watch your Tailwind layout update live — no manual editing, no trial-and-error in the editor. 🧩 Inspect, pin and compare elements - Hover any element to open a clean Tailwind inspector panel showing all applied utility classes. - Press Space to pin the popup and inspect multiple elements side-by-side like real devtools. 🧪Toggle and test Tailwind classes instantly - Enable or disable any Tailwind class visually to test layout, spacing or visibility. - Perfect for debugging Tailwind CSS issues with alignment, gaps, responsive behavior and hover states. 📏Layout and spacing guides - See visual overlays for margin, padding, height, width and position. - Quickly understand how Tailwind spacing, sizing and positioning utilities affect the layout. ↩️Undo / redo Tailwind changes - Step backward and forward through your Tailwind edits with shortcuts. - Safely experiment with different Tailwind class combinations without losing context. 📋One-click Tailwind class copy - Copy the full Tailwind utility class string for any element in one click. - Paste it directly into your code editor, React component, Next.js page or Blade/Vue template. 🛠️Tailwind v3 / v4 + custom config support - Fully compatible with Tailwind CSS v3 and Tailwind CSS v4. - Understands your tailwind.config theme, colors, spacing scale, fonts and breakpoints. - Supports the new Tailwind v4 CSS-first config structure so the Tailwind inspector stays accurate even in modern setups. 👤 Who is Tail Lens for? • Frontend developers who use Tailwind CSS every day and want better Tailwind devtools. • Teams building React, Next.js, Vue, Svelte, Laravel or SPA/MPA projects with Tailwind. • Developers who want a visual Tailwind editor to inspect Tailwind classes, debug Tailwind layouts and refactor utility class chains quickly. If you have ever asked “Which Tailwind class is doing this?” or spent minutes tweaking long Tailwind class strings by hand, Tail Lens is the Tailwind Chrome extension built for you 🚀
CSS Scanly - Copy CSS | Tailwind & Bootstrap
Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers CSS Scanly: Inspect, Analyze, and Edit CSS in Real-Time Discover the power of advanced CSS inspection and editing with CSS Scanly, the must-have tool for web developers, designers, and CSS enthusiasts. This Chrome extension transforms how you interact with web page styles, providing an intuitive and feature-rich environment for exploring and manipulating CSS on any website. Hover over any element to instantly view its applied styles See computed styles, including those from stylesheets and inline CSS Explore pseudo-class styles etc. without leaving the page Edit CSS properties on-the-fly and see changes immediately Experiment with styles without affecting the original page Perfect for prototyping and troubleshooting design issues Automatically detects and highlights Bootstrap and Tailwind CSS classes Gain insights into how popular frameworks are used on different websites Pin multiple CSS information boxes for easy comparison Ideal for analyzing styles across different elements simultaneously 5. Copy-to-Clipboard Functionality Quickly copy any CSS styles with a single click Streamline your workflow by easily transferring styles to your projects View applied media queries for responsive design analysis Understand how styles change across different screen sizes Intuitive control bar for easy navigation and tool management Keyboard shortcuts for enhanced productivity Pause and resume the scanner as needed Move the control bar to your preferred location on the screen Perfect For: Web Developers seeking to debug CSS issues Designers looking to analyze and draw inspiration from other websites Students learning web design and CSS QA testers verifying style implementations Anyone curious about the styles behind their favorite websites Elevate your web development and design process with CSS Scanly. Download now and start scanning the world of CSS like never before!
UI Inspector - Visual CSS Editor
Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging. A Visual CSS Editor for the Browser Elevate your web development and design workflow with UI Inspector, a powerful Chrome extension that lets you inspect, edit, and style any web page visually and in real-time. Skip the hassle of diving into DevTools and make instant adjustments directly on the page. With UI Inspector, you can: - Inspect elements — activate the extension and click on any element to view its attributes. - Edit attributes — modify styles in the visual editor and see changes in real time. - Control typography — adjust font family, size, weight, line height, and letter spacing. - Configure layout and spacing — set margins, paddings, display properties, and alignment. - Enhance backgrounds and shadows — apply custom colors, gradients, background blurs, and shadow effects. - Customize borders — adjust border width, style, color, and radius. - Fine-tune appearance — control opacity, blend modes, and transforms like rotation. - View all changes — see a list of every element you've updated in one place. - Copy CSS — view and copy the compiled CSS of your changes instantly. Unlock UI Inspector PRO and: - Apply changes globally — use the sensitivity slider to automatically apply style changes to similar elements across the page. - Style presets — save any element as a reusable preset and apply it across any website with a single click. - Export as Tailwind, SCSS, or JSX — copy your changes in the code format your project needs. - Export screenshots — capture high-resolution PNG screenshots of individual styled elements. - Export to GitHub — generate a GitHub issue with your design changes compiled to CSS. Who Is UI Inspector For? Web Developers: - Accelerate front-end development: quickly identify and fix layout or styling issues by editing elements on the fly. - Simplify CSS debugging: bypass DevTools with an intuitive, visual editor. - Export production-ready code: copy changes as CSS, Tailwind, SCSS, or JSX directly into your codebase. Web Designers: - Real-time design validation: adjust and perfect designs in the browser to ensure pixel-perfect implementation. - Bridge design and development: collaborate more effectively by directly tweaking live pages. - Save and reuse presets: build a library of reusable styles and apply them consistently across projects. 1. Activate the Extension: click the UI Inspector icon in your browser toolbar or press Alt/Option + Shift + I. 2. Inspect and Edit Elements: hover over any element to select it and instantly view its adjustable styles. 3. Modify Styles Visually: use the intuitive interface to change typography, layout, spacing, backgrounds, borders, shadows, and more. 4. Save and Apply Presets: create style presets for consistent design and apply them to any element on any site. 5. Export and Share: copy CSS in multiple formats, capture screenshots, or export changes as a GitHub issue. Compatible with any Chromium browser that supports the Side Panel API. For best results, ensure your browser supports all required APIs. If installation issues arise, update your browser to the latest version and try again.
