A plugin that provides a debug
component that makes colored outlines around elements, or child elements to view the structure.
Example using the utility classes debug-childs-green
and debug
in a <div ...>
to display a (default) red outline of the div, and a green outline of the childs.
yarn add --dev tailwind-debug-outline
Then add the plugin to your tailwind.config.js
file:
import tailwindDebugOutline from 'tailwind-debug-outline'
/** @type {import('tailwindcss').Config} */
export default {
plugins: [tailwindDebugOutline],
}
Add one of the following classes to any element in your document.
-
To outline the current element
-
debug
- draw a red dashed outline -
debug-green
- draw a green dashed outline -
debug-blue
- draw a blue dashed outline -
debug-yellow
- draw a yellow dashed outline
-
-
To outline the child elements
-
debug-childs
- draw a red dashed outline in every child element -
debug-childs-green
- draw a green dashed outline in every child element -
debug-childs-blue
- draw a blue dashed outline in every child element -
debug-childs-yellow
- draw a yellow dashed outline in every child element
-
<div className="debug-childs-green debug flex flex-row justify-center gap-2">
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>