如何在Tailwind中快速添加调试边框？能否实现`debug`简写类？

方案一：通过配置文件扩展自定义工具类 #

直接在tailwind.config.js的theme.extend里添加你的debug类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 按需调整你的文件路径
  theme: {
    extend: {
      utilities: {
        ".debug": {
          border: "1px solid red",
        },
      },
    },
  },
  plugins: [],
}

配置完成后，直接写className="debug"就能给元素加上你需要的红色高亮边框，和传统CSS的效果完全一致。

方案二：用自定义插件实现（更灵活） #

如果后续需要给debug类扩展更多样式（比如加背景色、调整边框粗细），可以用Tailwind的插件系统：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        ".debug": {
          border: "1px solid red",
          // 这里可以随时加其他调试样式，比如：
          // backgroundColor: "rgba(255,0,0,0.1)",
        },
      });
    },
  ],
}

小提示 #

要是临时调试不想改配置，也可以用Tailwind的强制生效变体：className="!border !border-red-500"，但自定义debug类显然更省心，不用重复敲一堆类名。

内容的提问来源于stack exchange，提问作者Ludder