blagciflpamngndolgmkfgicnfoamfok
Easily inspect and edit Tailwind CSS classes on web pages for rapid prototyping and debugging Elevate your Tailwind CSS workflow with Tailwind Inspector, the essential free Chrome extension for developers. Streamline your design process and debug with ease, all within your browser. 🔍 Check out our demo and learn more at https://interviewbotai.com/ Works with arbitrary classes and those purged during build time Compatible with any website, not just your own projects Copy class lists or entire elements with your modifications to clipboard 📏 Layout Assistance Guidelines and computed regions for precise element alignment Easily view Tailwind margin, padding values, and element sizes Get class suggestions as you type View resulting CSS and class previews Getting Started Install Tailwind Inspector from the Chrome Web Store Navigate to any website Open Chrome DevTools and find the Tailwind Inspector tab Start inspecting and modifying Tailwind classes! For support or questions, reach out to us at support@interviewbotai.com Tailwind Inspector: Empowering your Tailwind CSS development, for free
Font Finder
An easy-to-use font inspector to get CSS styles of the selected element FontFinder is created for designers, developers, and typographers. It allows a user to analyze the font information of any element and copy any pieces of that information to the clipboard. Font Finder examines all the selected characters to detect the font used to display this particular character. 1. Analyze any font on the active page. 2. Copy any piece of the element's information to the clipboard 3. Any active element can have any piece of the font's options (such as color, size, or family) adjusted inline Access these options by right-clicking the context menu over the selected text or right-clicking on the page and inspecting the element. Information Captured: 1. Font color (RGB and HEX) 2. Background color (RGB and HEX) 3. Font family (including actually rendered font!) 4. Font size 5. Line height, vertical alignment, letter, and word spacing 6. Font weight, style, variant 7. Text transform, decoration, align and indent 8. Element's type, class, and ID 9. Displays remote and local tags next to the rendered font Tools: Replace or change font family. Use custom fonts. Get the list of all fonts in the current frame. Notes: You can change the window opening mode to embedded mode from the right-click items over the toolbar button. This mode helps use the extension in full-screen mode.
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.
