Tailwindcss Debug Screens
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
Tailwind CSS Debug Screens 📱
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
[!NOTE] Docs for Tailwind CSS v1, v2 & v3 can be found here.
Install
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">
Disable in production
Laravel
<body class="{{ app()->isLocal() ? 'debug-screens' : '' }}">
Craft CMS
<body class="{{ devMode ? 'debug-screens' : '' }}">
Customization
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: ';
}
Custom Breakpoints
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;
}
