如何在Tailwind中快速添加调试边框？

Question

在调试传统 CSS 时，我经常使用红色边框来突出显示页面上的某个元素：

border: 1px solid red

。

在 Tailwind 中一遍又一遍地输入像

className="border-2 border-solid border-red"

这样的东西是相当麻烦的。我宁愿写一些像

className="debug"

这样的东西。 Tailwind 中可以使用这样的简写吗？

Answer 1

将自定义

utility

添加到 tailwind 的 CSS 文件中。

文档链接。

您可以使用普通的

CSS

或

@apply

方法。

---

CSS：

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

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

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

Tailwind 播放链接

---

@申请：

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

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

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

Tailwind 播放链接

Answer 2

这个插件使用 outline 而不是 border，也可以作为替代方案：https://www.npmjs.com/package/tailwind-debug-outline