构建多默认Tailwind类：属性专属默认色配置方案咨询

我正在为应用构建一系列Tailwind类，遇到了特定属性的「默认」颜色配置问题。我们将包含所有颜色的JSON文件传入tailwind.config.js的presets选项中，示例配置如下：

{
    "theme": {
      "extend": {
        "neutral": {
          "accent": "#8C9FB8",
          "strong": "#0D192A",
          "weak": "#5F738B",
          "text": "#435469",
          "button": "#435469",
          "placeholder": "#8C9FB8",
          "background": "#EFF3F9",
          "background-weak": "#F7F9FC",
          "background-disabled": "#DDE5F0",
          "background-tooltip": "#304055",
          "background-strong": "#0D192A",
          "border": "#C6D1E1",
          "border-button": "#8C9FB8",
          "border-focus": "#6D89AF",
          "template-blend": "#5F738B"
        },
        "danger": {
          "background-medium": "#E01939",
          "background-weak": "#FFEBF0",
          "border-focus": "#EE707B",
          "border-pressed": "#E7445A",
          "accent":  "#E01939",
          "button": "#B7233C",
          "text": "#8E2637",
          "strong": "#5F232D"
        },
        "info": {
          "background": "#B7EBF9",
          "background-weak": "#E2F7FD",
          "border": "#60D1ED",
          "accent": "#41BEE0",
          "text": "#2A7085",
          "text-hover": "#2A7085",
          "strong": "#224752"
        },
       ...
    }
}

目前设置默认文本颜色需使用text-neutral-text类，我希望简化为text-neutral；但使用DEFAULT值会导致border-neutral也应用该颜色，而边框应有不同的默认色。请问能否为不同DOM元素设置不同默认值，或有更优的Tailwind配置结构来实现这一需求？

Tailwind本身不支持为颜色组的不同属性（如text、border）单独设置DEFAULT值，因为DEFAULT是全局绑定到该颜色组的。以下是两种可行的解决思路：

方法一：自定义工具类（推荐） #

直接在tailwind.config.js的plugins中添加自定义工具类，将text-neutral映射到text-neutral-text，border-neutral映射到border-neutral-border，完全不改动原有颜色配置：

module.exports = {
  // 原有配置...
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.text-neutral': {
          color: 'theme("colors.neutral.text")',
        },
        '.border-neutral': {
          borderColor: 'theme("colors.neutral.border")',
        },
      })
    }
  ]
}

这样你就能直接使用text-neutral设置默认文本色，border-neutral设置默认边框色，两者互不干扰，且完全保留原有的颜色细分配置。

方法二：调整颜色配置结构 #

如果想从配置层面优化，可以新增快捷颜色项，直接将常用默认值作为独立颜色：

{
  "theme": {
    "extend": {
      "colors": {
        "neutral": {
          // 保留原有所有细分颜色项
          "text": "#435469",
          "border": "#C6D1E1",
          // ...其他颜色
        },
        // 新增快捷颜色，直接对应默认值
        "neutral-text": "#435469",
        "neutral-border": "#C6D1E1"
      }
    }
  }
}

不过这种方式需要使用text-neutral-text和border-neutral-border，不如自定义工具类的写法简洁，适合希望保持配置统一的场景。

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