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

yarn add tailwind-debug
npm i tailwind-debug

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

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

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>

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>

MIT