React项目中使用Tailwind实现border-spacing:0效果的方法

方式一：使用Tailwind内置工具类（推荐，Tailwind v3.0+支持） #

Tailwind v3及以上版本已经内置了border-separate和border-spacing-0工具类，无需额外配置，直接在React组件的div元素上添加对应类名即可：

<div className="border-separate border-spacing-0">
  {/* 你的业务内容 */}
</div>

方式二：自定义工具类（适配低版本Tailwind） #

如果你的项目使用的是低于v3的Tailwind版本，按以下步骤配置：

• 第一步：配置tailwind.config.js
  打开项目根目录的tailwind.config.js，在theme.extend字段下新增borderSpacing配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他原有配置...
  theme: {
    extend: {
      borderSpacing: {
        '0': '0',
      }
    },
  },
  plugins: [],
}

• 第二步：可选全局CSS自定义
  如果不需要配置多尺寸的border-spacing，仅需要border-spacing:0可以用这种方式。找到项目中引入了Tailwind指令的全局CSS文件（通常是src/index.css或者src/globals.css），在末尾添加以下代码：

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

/* 新增自定义工具类 */
@layer utilities {
  .border-spacing-0 {
    border-spacing: 0;
  }
}

配置完成后重启项目开发服务，就可以和内置类一样在React组件中使用border-separate border-spacing-0类名，实现边框和头部完整贴合的效果。

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