如何通过Tailwind生成含CSS变量的CSS文件并支持配色自定义？

1. 在Tailwind配置文件中绑定CSS变量 #

修改你的tailwind.config.js，把原本硬编码的颜色值替换为CSS变量引用，让Tailwind编译时直接使用变量而非固定色值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        neutral: 'var(--color-neutral)',
        // 支持分级色变量
        'primary-500': 'var(--color-primary-500)',
      },
    },
  },
}

2. 在入口CSS中定义默认变量值 #

在你的static/app.css（Tailwind输入文件）开头，添加:root选择器定义变量默认值，用户后续可直接修改这些值来调整配色：

/* 自定义配色变量默认值 */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-neutral: #6b7280;
  --color-primary-500: #2563eb;
}

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

3. 重新编译生成目标CSS #

执行你原本的编译命令，重新生成rfui.css：

./tailwindcss -i static/app.css -o static/rfui.css --minify

此时生成的CSS文件中，所有主题色相关样式都会引用你定义的变量，用户只需修改:root内的变量值，就能全局调整界面配色。

进阶：精细化分级配色方案 #

如果需要更灵活的配色控制（比如对应Tailwind原生的分级色系统），可以扩展变量命名规范：

:root {
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  /* ... 可继续定义到900级 */
}

同时在Tailwind配置中对应绑定：

colors: {
  primary: {
    50: 'var(--color-primary-50)',
    100: 'var(--color-primary-100)',
    // ... 其他分级色配置
  }
}

这样用户可以单独调整某一级的颜色，适配更复杂的自定义需求。

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