Tailwind CSS Debug Screens 📱
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
Install
Requires Tailwind v1.0 or higher.
- Install the plugin:
npm install tailwindcss-debug-screens --save-dev- Add it to your
tailwind.config.jsfile:
// tailwind.config.js
module.exports = {
//...
plugins: [
require('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 in the theme.debugScreens section of your tailwind.config.js file.
Ignore screens
To ignore a specific screen (for instance dark mode), add the screen name to the ignore configuration array. dark is ignored by default.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
ignore: ['dark'],
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}Position
The first item of the position configuration array can be top or bottom, the second item can be left or right.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
position: ['bottom', 'left'],
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}Styles
Take a look at the index.js file to see all the default styles.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
style: {
backgroundColor: '#C0FFEE',
color: 'black',
// ...
},
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}Prefix
Modify the debug label prefix with the prefix configuration option.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
prefix: 'screen: ',
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}Selector
Modify the debug element selector with the selector configuration option.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
selector: '.debug-screens',
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}