tailwindcss-debug-screens
v2.2.1
Published
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
Downloads
61,907
Readme
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.js
file:
// tailwind.config.js
module.exports = {
//...
plugins: [
require('tailwindcss-debug-screens'),
]
}
Usage
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' : '' }}">
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'),
],
}