安装Shadcn后Tailwind背景色失效且自定义类构建失败求助

1. 修正配置文件路径匹配 #

你的Tailwind配置文件是tailwind.config.ts，但components.json中tailwind.config字段写的是tailwind.config.js，这会导致ShadCN无法读取到正确的自定义颜色配置。修改components.json中的对应字段：

"tailwind": {
  "config": "tailwind.config.ts",
  // 其余配置保持不变
}

2. 调整自定义CSS的写法 #

如果路径修正后问题仍存在，可直接在自定义组件中使用Tailwind的theme()函数指定背景色，避免指令解析错误：

@layer components{
    .search-panel-input{
        @apply mx-1 pl-1 w-32 rounded-md appearance-none;
        background-color: theme('colors.search-panel-element');
    }
}

或者直接使用颜色值的Tailwind语法：

@apply mx-1 pl-1 w-32 bg-[#EDEDED] rounded-md appearance-none;

3. 检查样式导入顺序 #

确保你的自定义tailwind.css在ShadCN生成的全局样式之后导入（如果有），避免自定义类被覆盖。

4. 清理缓存重新构建 #

缓存可能导致配置未生效，执行以下操作：

# 清理Remix缓存
npx remix clean
# 或彻底清理依赖与构建文件
rm -rf node_modules dist
npm install
npm run build

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