A Tailwind CSS component that shows the currently active container (responsive breakpoint).
Requires Tailwind v1.0 or higher.
- Install the plugin:
npm install tailwindcss-debug-containers --save-dev- Add it to your
tailwind.config.jsfile:
// tailwind.config.js
module.exports = {
//...
plugins: [require("tailwindcss-debug-containers")],
};- Add the class
debug-containersto your<body>tag:
<body class="debug-containers"></body><body class="{{ app()->isLocal() ? 'debug-containers' : '' }}"><body class="{{ devMode ? 'debug-containers' : '' }}">You can customize this plugin in the theme.debugContainers section of your tailwind.config.js file.
To ignore a specific container (for instance dark mode), add the container name to the ignore configuration array. dark is ignored by default.
// tailwind.config.js
module.exports = {
theme: {
debugContainers: {
ignore: ["dark"],
},
},
plugins: [require("tailwindcss-debug-containers")],
};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: {
debugContainers: {
position: ["bottom", "left"],
},
},
plugins: [require("tailwindcss-debug-containers")],
};Take a look at the index.js file to see all the default styles.
// tailwind.config.js
module.exports = {
theme: {
debugContainers: {
style: {
backgroundColor: "#C0FFEE",
color: "black",
// ...
},
},
},
plugins: [require("tailwindcss-debug-containers")],
};Modify the debug label prefix with the prefix configuration option.
// tailwind.config.js
module.exports = {
theme: {
debugContainers: {
prefix: "container: ",
},
},
plugins: [require("tailwindcss-debug-containers")],
};Modify the debug element selector with the selector configuration option.
// tailwind.config.js
module.exports = {
theme: {
debugContainers: {
selector: ".debug-containers",
},
},
plugins: [require("tailwindcss-debug-containers")],
};