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: ';
}When defining custom breakpoints, it can affect their order resulting in the component displaying an incorrect value or not updating on resize.
To ensure breakpoints are received in the user-defined order, it may be necessary to add breakpoint-*: initial in your breakpoint definitions. This
is also recommended in the official Tailwind documentation.
@theme {
--breakpoint-*: initial;
--breakpoint-xs: 360px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
--breakpoint-3xl: 1920px;
}