fccohfilddfaljiionagbbjelbliokll
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.
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.
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 🚀
Amino: Live CSS Editor
Customize any website with your own CSS and see your changes instantly with Amino! Amino is a free CSS editor that lets you write and apply persistent CSS to any website. Use Amino to experiment with CSS in realtime, style your favorite websites, fix rendering issues—the applications are endless. Your CSS is stored in the cloud and is served every time you visit the page, making it effectively permanent as long as the extension is enabled. NEW FEATURE Guest mode: after many requests from users to be able to use amino without creating an account we've finally launched our Guest mode! It will work entirely locally with no need to create an account. If you want cloud storage you can simple create an account at anytime and enjoy the same great Amino experience sync'd across all your devices. Amino has previously been featured in: Chrome's ‘Top Picks’ in developer tool extensions, Smashing Magazine, Product Hunt, Designer News, Codrops, Sidebar, and more. FEATURES - Syntax highlighting - Automatic indenting and outdenting - Inspect tool - DevTools integration (*new*) - SCSS/Sass support - Autocomplete - Autosave - Data export - Multiple color schemes - Guest Mode USAGE TIERS - Guest & Free Cloud Tier - Free tiers are supported by ad displays in the sidebar/editor and cloud dashboard - Pro Cloud Tier - Remove ads - Access to collections - Unlimited Cloud Storage - Access to beta features BETA FEATURES (Pro Only) - AI Assistant to help write and understand your CSS rules For new feature announcements or just to say hello, please follow Amino on X: https://x.com/aminoeditor For more info or to sign up visit: https://amino.dev For frequently asked questions visit: https://amino.dev/faqs For documentation and guides on how to get the most out of Amino: https://docs.amino.dev For Amino's open source projects: https://github.com/aminoeditor By installing the extension or accessing the amino.dev website, you agree to Amino’s Privacy Policy (https://amino.dev/privacy) and Terms of Use (https://amino.dev/terms). TLDR: We care about user privacy, and we will never sell your data. To learn about the permissions this extension requests: https://amino.dev/permissions Thanks for giving Amino a try. If you like our product, please consider leaving us a review.
Tailcolors: Tailwind CSS Color Palette
Preview and copy any Tailwind CSS color directly from your browser with our extension 🎨 Supports copying all 286 Tailwind v4.2 colors (choose whether to copy the Tailwind CSS classname, HEX code or OKLCH value). ✨ New (Feb 2026): Updated to support the extended Tailwind v4.2 color palette, including new color shades — mauve, mist, taupe and olive. How to use our Tailwind Color Palette extension: 1. ⬇️ Download & install the Tailcolors extension: This lightweight extension let's you preview and instantly copy any TailwindCSS color, directly from your browser. 2.👆 Click to copy any Tailwind color: Instantly copy the Tailwind CSS color class by clicking it, from shades 50-950. 3. 🎨 Copy the Tailwind class, HEX code or OKLCH color: You can toggle between copying the Tailwind, HEX or OKLCH color code as needed. v1.1.1 (Feb 26, 2026) - Update extension popup to hide scrollbars v1.1.0 (Feb 23, 2026) - Updated the extension to support new Tailwind CSS v4.2 colors (mauve, olive, taupe, mist). - Automatically remember your color format preference between uses of the extension. For example, if you switch to HEX colors, that will persist between uses of the extension - Adjust the extension UI to accomodate more colors + show which color you're about to copy on hover.
