A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
[!NOTE] Docs for Tailwind CSS v1, v2 & v3 can be found here.
Requires Tailwind v4.0 or higher.
- Install the plugin:
npm install tailwindcss-debug-screens --save-dev- Add the plugin to your main
style.cssfile:
@import "tailwindcss";
+ @plugin "tailwindcss-debug-screens";- Add the class
debug-screensto your<body>tag:
<body class="debug-screens"><body class="{{ app()->isLocal() ? 'debug-screens' : '' }}"><body class="{{ devMode ? 'debug-screens' : '' }}">You can customize this plugin by using the following options when registering the plugin.
@import "tailwindcss";
@plugin "tailwindcss-debug-screens" {
className: 'debug-screens';
position: 'bottom, left';
prefix: 'screen: ';
}