Tailwind Debug Plugin

The Tailwind Debug Plugin helps web developers quickly highlight any HTML element with a red dashed outline for debugging purposes.

How to Add and Use the Tailwind Debug Plugin

Step 1: Install the Plugin

yarn add tailwind-debug
npm i tailwind-debug

Add the tailwind-debug plugin to your style.css file:

@import "tailwindcss";
@plugin "tailwind-debug";

Step 2: Apply Debug Classes

To debug an HTML element, add the debug class:

<div class="debug"></div>

For debugging child elements, use the *:debug class:

<ul class="*:debug">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Step 3: Choose Debug Colors

There are multiple color options available for debugging. Apply them by using the corresponding class:

<div class="debug-red"></div>
<div class="debug-green"></div>
<div class="debug-blue"></div>
<div class="debug-yellow"></div>

License

MIT