A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
npm install tailwindcss-debug-screensA 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.
1. Install the plugin:
``bash`
npm install tailwindcss-debug-screens --save-dev
2. Add the plugin to your main style.css file:
`diff`
@import "tailwindcss";
+ @plugin "tailwindcss-debug-screens";
3. Add the class debug-screens to your
tag:`html
`$3
#### Laravel
`twig
`#### Craft CMS
`twig
`Customization
You can customize this plugin by using the following options when registering the plugin.
`css
@import "tailwindcss";
@plugin "tailwindcss-debug-screens" {
className: 'debug-screens';
position: 'bottom, left';
prefix: 'screen: ';
}
``