A Tailwind CSS plugin that displays the currently active responsive breakpoint on screen for debugging.
Tailwind CSS Debug Screens is a plugin for Tailwind CSS that displays the currently active responsive breakpoint directly on the screen. It helps frontend developers visually identify which screen size is active during responsive design development, eliminating the need to constantly check browser developer tools.
Frontend developers using Tailwind CSS who need to debug and develop responsive layouts efficiently.
It provides immediate visual feedback about breakpoints without interrupting workflow, integrates seamlessly with Tailwind CSS projects, and can be easily disabled in production to avoid performance overhead.
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Displays the active breakpoint directly on screen, eliminating the need to constantly open browser dev tools during responsive design work.
Installs easily via npm and integrates as a CSS plugin with minimal setup, aligning with Tailwind's utility-first philosophy.
Can be conditionally disabled in production using environment-based classes, as shown in the README with Laravel and Craft CMS examples.
Allows configuration of class name, screen position, and text prefix through plugin options for tailored debugging.
Requires Tailwind CSS v4.0 or higher, making it incompatible with older projects without upgrading.
Handling custom breakpoints requires additional CSS rules like `breakpoint-*: initial` to ensure correct order, which can be confusing and prone to misconfiguration.
Debugging only works when the `debug-screens` class is applied to the body, risking oversight in complex applications or during deployment.