A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
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-screens to your <body> tag.
<body class="debug-screens">Make sure the class is only present during development. Here's an example of how you could do that in Craft CMS:
<body class="{{ devMode ? 'debug-screens' : '' }}">You can customize the position and styles in the theme.debugScreens section of your tailwind.config.js file.
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'),
],
}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'),
],
}In some cases, like a custom screen media query, it can be helpful to ignore a specific screen. In that case
add the screen name to the ignore configuration array.
// tailwind.config.js
module.exports = {
theme: {
debugScreens: {
ignore: ["custom-screen-name"],
},
},
plugins: [
require('tailwindcss-debug-screens'),
],
}