能否用Tailwind默认颜色变量定义自定义CSS变量--primary？

可以用Tailwind的默认颜色值来定义你的--primary变量，但不能直接像你写的那样引用--tw-red-300——因为Tailwind的工具类颜色并非全局CSS变量，是编译时生成的，无法直接在:root里直接调用。

下面给你两种可行的实现方式：

方式一：直接复用Tailwind颜色的原始值 #

Tailwind所有默认颜色都有对应的原始色值（比如red-300对应的OKLCH或HEX值），你可以直接把这个值拿来赋值给--primary：

:root {
  --primary: oklch(0.814 0.175 21.47); /* 对应Tailwind red-300的OKLCH值 */
}

你可以通过Tailwind的颜色规范文档查到所有默认颜色的原始值，也能在配置文件里用theme('colors.red.300')语句获取。

方式二：通过Tailwind配置生成全局变量 #

如果想更灵活地复用Tailwind的颜色系统，可以在tailwind.config.js里配置自定义属性，让Tailwind帮你生成可直接调用的全局变量：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
      },
    },
  },
  plugins: [],
}

接着在你的CSS文件里，用Tailwind的theme()函数引用默认颜色：

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary: theme('colors.red.300');
}

这样配置后，--primary会被编译成Tailwind red-300的对应色值，同时你还能在Tailwind工具类里直接用text-primary、bg-primary这类类名，和shadCN UI的主题系统完美兼容。

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