Media
3 items
Description
A minimalist and effective tool to display TailwindCSS responsive breakpoints for easy reference during development. Respify is a developer tool that shows the current TailwindCSS responsive breakpoint (xs, sm, md, lg, xl) in a draggable tooltip directly on your webpage. It helps front-end developers quickly identify which breakpoint is active during responsive design work. Features: - 📱 Real-time display of current TailwindCSS breakpoint - 📊 Shows current screen resolution - 🔄 Updates automatically when resizing the browser - 🖱️ Draggable tooltip that stays where you place it - ⚙️ Customizable tooltip size and opacity - 🔍 Smart detection of TailwindCSS usage on websites - 📋 Whitelist and blacklist functionality for specific sites - 🛠️ Development mode to only show on development URLs Usage: 1. Click the Respify icon in your browser toolbar to access settings 2. Navigate to any website using TailwindCSS 3. The tooltip will appear showing the current breakpoint and screen resolution 4. Drag the tooltip to position it anywhere on the screen 5. Adjust size and opacity from the extension popup Configuration: Breakpoints Default TailwindCSS breakpoints: xs: < 640px sm: ≥ 640px md: ≥ 768px lg: ≥ 1024px xl: ≥ 1280px 2xl: ≥ 1536px These can be customized in the extension settings. Display Options TailwindCSS Only: Only show on sites using TailwindCSS Development Only: Only show on development URLs Whitelist Mode: Only show on whitelisted sites Blacklist Mode: Don't show on blacklisted sites