如何在自定义CSS类中使用Tailwind CSS默认颜色变量？

Tailwind 原生支持两种方式在自定义CSS中调用内置调色板颜色，无需额外配置：

• 方法1：使用内置theme()函数（推荐）
  直接在CSS中调用theme()读取Tailwind配置项，自动适配你在tailwind.config.js中修改的自定义配色，不需要记忆变量命名规则，示例代码如下：

li.active {
  color: theme('colors.red.50'); /* 对应Tailwind默认调色板的red-50 */
  /* 其他属性调用规则一致，例：
  background-color: theme('colors.green.200');
  border-color: theme('colors.slate.800');
  */
}

• 方法2：直接调用Tailwind生成的CSS变量
  如果你需要用原生CSS变量写法，Tailwind默认导出的颜色变量格式为--tw-color-[颜色名]-[色阶]，注意变量值是RGB数组，需要套入rgb()/rgba()函数使用，示例代码如下：

li.active {
  /* 不使用透明度 */
  color: rgb(var(--tw-color-red-50));
  /* 自定义透明度写法 */
  color: rgb(var(--tw-color-red-50) / 0.8);
}

你示例中使用的--colors-red-50属于旧版本Tailwind或自定义前缀的变量写法，若未手动配置过变量前缀，默认使用上述--tw-color-前缀即可。

Next.js项目适配注意事项 #

你只需要确保存放自定义CSS的文件已在根布局文件app/layout.tsx（App Router）或pages/_app.tsx（Pages Router）中正常引入，且tailwind.config.ts的content字段覆盖了所有用到active类的文件路径，上述写法即可正常生效。

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