Item logo image for Respify | A TailwindCSS responsive tooltip

Respify | A TailwindCSS responsive tooltip

Item media 3 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 1 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 2 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 3 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 1 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 1 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 2 (screenshot) for Respify | A TailwindCSS responsive tooltip
Item media 3 (screenshot) for Respify | A TailwindCSS responsive tooltip

Overview

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

Details

  • Version
    1.0
  • Updated
    March 5, 2025
  • Size
    3.03MiB
  • Languages
    English
  • Developer
    Email
    mathieu1508@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

Built with Tailwind CSS

0.0

Built with Tailwind CSS is a Chrome Extension that identifies the usage of Tailwind CSS in web pages.

Windy

2.8

Convert any HTML on any website to TailwindCSS

Pixel Perfect Extension

5.0

Easily measure pixel-perfect distances between elements on any webpage with intuitive tools. Ideal for developers, designers, and QA

PixelParallel by htmlBurger

4.7

PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers

ExtractCSS

5.0

CSS extraction and Tailwind conversion for Chrome

Excompt

2.8

Free to scan tailwind css and export tailwind CSS component in any website page

Gimli Tailwind

4.6

A DevTools extension enabling smart tools for Tailwind CSS.

Tailwind CSS Devtools

4.4

Tailwind CSS Developer Tools

Pesticide (without hover bar)

5.0

A CSS debugging tool that outlines all page elements to help identify and fix layout issues.

Tailwind responsive breakpoint display

4.6

Display screen dimensions and tailwind breakpoint prefix.

CSS Scanly - Copy CSS | Tailwind & Bootstrap

5.0

Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers

CSS Extractor Pro - Extract Clean CSS Code & Color Palettes

3.0

Extract clean CSS code from any webpage element & generate complete color palettes. Essential developer tool.

Built with Tailwind CSS

0.0

Built with Tailwind CSS is a Chrome Extension that identifies the usage of Tailwind CSS in web pages.

Windy

2.8

Convert any HTML on any website to TailwindCSS

Pixel Perfect Extension

5.0

Easily measure pixel-perfect distances between elements on any webpage with intuitive tools. Ideal for developers, designers, and QA

PixelParallel by htmlBurger

4.7

PixelParallel by htmlBurger - Pixel perfect HTML vs Design tool for developers

ExtractCSS

5.0

CSS extraction and Tailwind conversion for Chrome

Excompt

2.8

Free to scan tailwind css and export tailwind CSS component in any website page

Gimli Tailwind

4.6

A DevTools extension enabling smart tools for Tailwind CSS.

Tailwind CSS Devtools

4.4

Tailwind CSS Developer Tools

Google apps