ogmfhcjggalkokpnapcllaapfiijgeoa
Displays the current Tailwind CSS breakpoint and screen width in pixels. 🔥 Tailwind CSS Breakpoint Checker – Instantly See Screen Width & Active Tailwind Breakpoints! Are you a frontend developer or Tailwind CSS user? Stop guessing breakpoints! Tailwind Breakpoint Checker helps you instantly see your screen width in pixels and the currently active TailwindCSS breakpoint (sm, md, lg, xl, 2xl). Perfect for responsive design debugging and real-time breakpoint testing! 📏✨ 💡 Key Features: ✅ Live Breakpoint Detection – Instantly displays the active Tailwind CSS breakpoint. ✅ Real-Time Screen Width Display – See your current viewport width in pixels dynamically. ✅ Floating Overlay – A non-intrusive box in the bottom-right corner shows breakpoint info. ✅ One-Click Toggle – Easily turn it ON/OFF from the extension popup. ✅ Works Across All Tabs – Automatically applies on every open website. ✅ Lightweight & Blazing Fast – No unnecessary permissions, no performance impact! 🎯 Why Install? 🚀 TailwindCSS Developers' Best Friend – Save time debugging responsive designs. 🛠 Perfect for Frontend Developers – Quickly test Tailwind’s breakpoints. 👨💻 Enhance Productivity – No more manually resizing windows to check breakpoints! Whether you're a Tailwind CSS beginner or an experienced frontend engineer, this extension makes responsive development easier and faster! 🔧 How It Works 1️⃣ Install the extension from the Chrome Web Store. 2️⃣ Click the extension icon in your browser toolbar. 3️⃣ Toggle ON/OFF – A floating box will appear in the bottom-right corner. 4️⃣ Resize your window and watch the breakpoint & width update in real-time! 🚀 That’s it! No configuration needed – just install and start using! 💬 Frequently Asked Questions (FAQ) ❓ Does this extension work on all websites? ✅ Yes! It works on all websites. ❓ Does this extension slow down my browser? ✅ Nope! It’s a lightweight and optimized tool with zero performance impact. ❓ Does it work with all versions of TailwindCSS? ✅ Yes! It works with Tailwind CSS v2, v3, and future updates since it detects breakpoints dynamically.
Permissions With Warnings
A warning permissions checking tool for extension developers Note: this extension is only for browser extension developers. When users install your extension, some permissions cause a warning to the user. And the extension will be temporarily disabled when upgrading if you add a new warning permission. This tool provides functionality to check and compare warning permissions. Just copy and paste your extension manifest to the input box.
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.
CSS Inspector Pro
Display CSS properties as overlay and export to Excel Core Features Real-time CSS Inspection Hover over elements to view their CSS properties Shows element dimensions, margins, padding, and font details Visual measurement lines for width and height Non-intrusive overlay display Element Selection Click to pin/select elements Click again to deselect Multiple elements can be selected simultaneously Selected elements maintain their measurements and highlights Visual Measurements Real-time size measurements (width × height) Distance measurements to nearby elements Visual measurement lines with dimensions Automatic positioning of overlays to avoid screen edges 4. Detailed CSS Information Basic info for hovered elements: Element tag name Dimensions Position Margin and padding Basic font properties Additional info for pinned elements: Font weight Line height Letter spacing Distances to nearby elements 5. Performance Optimizations Debounced mouse movement handling Event delegation Limited DOM operations Efficient overlay management Smart element filtering Export Functionality Export CSS properties to CSV format Compatible with Excel Includes element tags, dimensions, and styles Technical Features 1. Non-invasive Implementation Preserves original element styles Restores elements to original state on deselection High z-index overlays to stay on top Responsive Design Adjusts overlay positions based on viewport Handles window scrolling Prevents overlays from going off-screen Error Handling Graceful error recovery Debug logging Clean cleanup on deactivation Usage Click the extension icon to activate Hover over elements to see their CSS properties 3. Click elements to pin their measurements Click again to unpin Click the extension icon again to deactivate Use export feature to save CSS data to CSV The extension is designed to be a professional tool for developers and designers who need detailed CSS information while maintaining good performance and user experience.
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/
