tailwind-debug-outline
v1.0.0
A Tailwind CSS plugin to add dashed outline rectangles to HTML elements or child elements.
0/weekUpdated 2 years agoMITUnpacked: 99.6 KB
Published by Carlos Guedes
npm install tailwind-debug-outlineTailwind CSS ~ Debug Outline Plugin
A plugin that provides a debug component that makes colored outlines around elements, or child elements to view the structure.
Example
Example using the utility classes `` Then add the plugin to your tailwind.config.js ` /* @type {import('tailwindcss').Config} / ` Add one of the following classes to any element in your document. * To outline the current element * To outline the child elements `debug-childs-green and debug in a to display a (default) red outline of the div, and a green outline of the childs.Instalation
yarn add --dev tailwind-debug-outline file:js
import tailwindDebugOutline from 'tailwind-debug-outline'
export default {
plugins: [tailwindDebugOutline],
}Usage
* debug - draw a _red_ dashed outlinedebug-green
* - draw a _green_ dashed outlinedebug-blue
* - draw a _blue_ dashed outlinedebug-yellow
* - draw a _yellow_ dashed outline
* debug-childs - draw a _red_ dashed outline in every child elementdebug-childs-green
* - draw a _green_ dashed outline in every child elementdebug-childs-blue
* - draw a _blue_ dashed outline in every child elementdebug-childs-yellow
* - draw a _yellow_ dashed outline in every child element$3
html``