phlglhdlhfjmmokeoclhefknljfoflla
The complete developer tool for Tailwind CSS! Increase your productivity and build Tailwind CSS websites faster with Inspect Flow! - Inspecting Tailwind CSS websites has never been easier! Quickly hover over elements to see the styles applied. - Quickly view components in CodePen and copy the HTML in a single click. - Edit elements in real-time and get instant feedback before finalizing changes in your code base. - Can't remember the name of a utility class? Every class name is at your fingertips when adding new utility classes with our auto-complete integration.
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.
Gimli Tailwind
A DevTools extension enabling smart tools for Tailwind CSS. The professional Devtools extension for Tailwind CSS developers. It lets you view and intuitively edit utility classes. Please note: Gimli Tailwind requires a $49 one-time lifetime license. No subscriptions. You can purchase your license via the extension (includes a 14-day money-back guarantee). ✔️ Autocomplete: Intelligent suggestions for class names. It also supports searching for CSS property names. ✔️ Quickly toggle utility values with Cmd/Ctrl + Click. ✔️ Intuitive UI We don't want to overwhelm developers with options and inputs. Here’s a list of features that enable developers to find relevant utilities quickly: ➤ Variant override: Displays what variant is active. ➤ Inputs are grouped the same way as in the official docs. ➤ Some sections like Grid and Flex will only be visible when relevant. ➤ Active inputs are always shown. ➤ Customizable UI.
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.
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 🚀