如何在TailwindCSS中为设计系统颜色令牌创建别名？

你的问题核心在于：Tailwind 在 extend 的 colors 配置里不会把字符串形式的 primary-50 解析为已存在的颜色令牌，它会直接把这个字符串当作无效的颜色值处理，所以不会生成对应的 bg-customColor 类。

不需要额外写 CSS 类，有两种简单可行的实现方式：

方法一：直接引用设计系统的颜色值 #

既然已经导入了 myColors，直接从里面取出 primary-50 的具体颜色值赋值给别名即可：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  important: '#root',
  theme: {
    colors: {
      ...myColors, // 从设计系统导入的颜色令牌
    },
    extend: {
      colors: {
        customColor: myColors['primary-50'],
      },
    },
  },
};

方法二：用 Tailwind 的 theme 函数引用已定义颜色 #

如果想通过 Tailwind 主题系统来引用已存在的颜色，可以借助 theme 函数获取：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  important: '#root',
  theme: {
    colors: {
      ...myColors,
    },
    extend: {
      colors: ({ theme }) => ({
        customColor: theme('colors.primary-50'),
      }),
    },
  },
};

配置完成后重启 Tailwind 构建工具，就能正常使用 bg-customColor 这类类名了。

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