如何在Tailwind CSS自定义工具类中引用自定义颜色变量

当然有办法实现！Tailwind的插件系统提供了直接访问主题配置的方式，这里有两种常用的方案，能让你的自定义工具类和扩展的颜色自动同步：

方案1：使用theme函数直接获取颜色值 #

在插件回调里解构出theme函数，然后用模板字符串把颜色值插入到样式中，就能直接引用你在extend里定义的red-500了：

plugins: [
  plugin(({ addUtilities, theme }) => {
    const utilities = {
      '.border-invalid': {
        border: `1px solid ${theme('colors.red-500')}`,
      },
      // 其他自定义工具类...
    };
    addUtilities(utilities);
  }),
]

方案2：用@apply复用Tailwind工具类 #

这种方式更贴合Tailwind的设计理念，直接组合已有的边框工具类，不需要手写原始CSS：

plugins: [
  plugin(({ addUtilities }) => {
    const utilities = {
      '.border-invalid': {
        '@apply border border-solid border-red-500': {},
      },
      // 其他自定义工具类...
    };
    addUtilities(utilities);
  }),
]

补充两种写法的差异 #

根据实际使用反馈：

• 写成 border: "1px solid theme('colors.red-500')" 时，在编辑器鼠标悬停会显示清晰的CSS定义（Tailwind会自动解析theme函数）；
• 而模板字符串 border: 1px solid ${theme('colors.red-500')} 的写法，悬停时会显示解析后的字面量值（对应十六进制颜色），这也是符合预期的正常行为。

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