tailwind-debug-mode
v0.0.8
Published
A Tailwind CSS plugin that makes it easier to debug layouts.
Downloads
521
Maintainers
jeroengeritsReadme
Tailwind CSS ~ Debug Mode
A plugin that provides a debug component that makes it visually easier to view the document structure.
Preview
Example
View an example of the debug mode in action: https://jeroengerits.github.io/tailwind-debug-mode/
Basic usage
<!-- Enable debug mode : -->
<body class="debug">
<!-- ... -->
</body>Currently, the plugin only supports the
debugcomponent on a body element.
Installation
Install the plugin
# Using npm
npm install tailwind-debug-mode
# Using Yarn
yarn add tailwind-debug-modeThen add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
plugins: [
require('tailwind-debug-mode'),
// ...
],
}Configuration
Optionally - define your custom color scheme
// tailwind.config.js
module.exports = {
plugins: [
require('tailwind-debug-mode')({
wireColor: '#000000cc', // the color of the wires
svgColor: '#000000cc', // the color of the svg
textColor: '#33333399', // the color of the text on hover
inputColor: '#33333322', // the background color of input elements
}),
// ...
],
}