为何Tailwind边框继承文本颜色类且border-color不生效？如何设置背景边框同色？

问题原因分析 #

你当前的自定义颜色配置中，primary是包含text、bg、border字段的对象，但未设置DEFAULT默认值。当使用border-primary这类类名时，Tailwind无法识别对应的颜色值，浏览器会默认让边框继承元素的color属性（即文本颜色），导致边框和文本同色；只有使用border-primary-border才能正确调用你定义的边框颜色，但这不符合简洁的使用需求。

解决方案 #

调整自定义颜色的配置结构，给primary设置默认颜色值（对应背景和边框色），文本色作为子项单独定义：

修改Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#165DFF', // 背景、边框使用的默认颜色
          text: '#ffffff'      // 文本颜色
        }
      }
    },
  },
  plugins: [],
}

正确使用类名 #

此时可直接用以下类名实现「背景与边框同色、文本另一种颜色」的效果：

<div class="w-40 h-20 border-2 border-primary bg-primary text-primary-text flex justify-center items-center">
  Hello World
</div>

替代方案 #

若偏好扁平化的颜色命名，也可直接定义独立的颜色变量：

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#165DFF',
        'primary-text': '#ffffff'
      }
    }
  }
}

使用时类名与上述一致，效果完全相同。

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