使用@config指令时tailwind.admin.config.js未覆盖主配置的问题排查

核心错误点 #

1. 函数式配置不被Tailwind的@config指令支持
   Tailwind的@config指令仅支持导出静态配置对象，不支持导出函数。你改成导出函数后，Tailwind不会执行该函数，自然不会有console输出，也不会加载你返回的配置内容。

2. 自定义CSS文件可能未正确引入
   如果项目入口仍在引入默认的tailwind.css（而非你创建的tailwind.admin.css），根目录的tailwind.config.js会优先生效，导致自定义配置被忽略。

3. 缓存导致配置未更新
   Vite的开发缓存可能保留了旧的Tailwind配置，即使修改了自定义配置也不会立即生效。

解决步骤 #

1. 恢复配置文件为静态对象格式

将tailwind.admin.config.js改回导出对象的形式，去掉函数和console语句：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    colors: {
      secondary: '#999999',
      primary: '#000000',
    },
  },
}

2. 确保正确引入自定义CSS文件

在项目入口文件（如src/main.jsx）中，替换默认的Tailwind CSS引入为你的自定义文件：

// 注释或删除原来的默认引入
// import './tailwind.css';
// 引入自定义的admin样式文件
import './path/to/tailwind.admin.css';

注意：路径要根据你实际的文件位置调整，确保是正确的相对路径。

3. 清除缓存并重启开发服务

停止当前的Vite开发服务，删除Vite的缓存目录（通常是node_modules/.cache），然后重新启动服务：

# 停止服务后执行
rm -rf node_modules/.cache
npm run dev

4. 验证配置是否生效

在组件中添加测试代码，使用自定义的颜色类，比如：

<div className="bg-primary text-secondary">测试自定义颜色</div>

如果背景色为黑色（#000000）、文字为灰色（#999999），说明配置已生效。

内容的提问来源于stack exchange，提问作者Phong Vũ