CRX id
cgnplhkjhaafbhphhmhghomnfoaacano
cgnplhkjhaafbhphhmhghomnfoaacano
Description from extension meta
A minimalist and effective tool to display TailwindCSS responsive breakpoints for easy reference during development.
Image from store
Description from store
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