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@2 --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"><body class="{{ app()->isLocal() ? 'debug-screens' : '' }}"><body class="{{ devMode ? 'debug-screens' : '' }}">You can customize this plugin in the theme.debugScreens section of your tailwind.config.js file.
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'), ], }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'), ], }Modify the debug label prefix with the prefix configuration option.
// tailwind.config.js module.exports = { theme: { debugScreens: { prefix: 'screen: ', }, }, plugins: [ require('tailwindcss-debug-screens'), ], }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'), ], }