How to quickly add a debug border in Tailwind?

Question

When debugging traditional CSS I often use a red border to highlight a certain element on my page: border: 1px solid red.

In Tailwind it's quite cumbersome to type something like className="border-2 border-solid border-red" over and over again. I'd rather write something like className="debug". Is a shorthand like that possible in Tailwind?

Answer 1

Add a custom utility to your tailwind's CSS file.

Link to the docs.

You can use plain CSS or the @apply method.

---

CSS:

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .debug {
    border: 1px solid red;
  }
}

Tailwind-play link

---

@apply:

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .debug {
    @apply border-[1px] border-red-500
  }
}

Tailwind-play link