React/Vite项目中Tailwind CSS的@apply规则无法生效问题

问题根源 #

出现「Unknown property name」错误，本质是PostCSS没有正确解析Tailwind的@apply指令，浏览器把它当成了无效的CSS属性处理。

解决方案 #

1. 补充PostCSS配置文件 #

Vite需要明确配置PostCSS来识别Tailwind的特殊指令，在项目根目录新建postcss.config.js，写入以下内容：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

2. 调整自定义类的编写位置（优化实践） #

虽然你的写法本身没问题，但按照Tailwind的规范，自定义组件类最好放在@tailwind components之后、@tailwind utilities之前，确保样式优先级正确：

@tailwind base;
@tailwind components;

/* 自定义类放在这个区间 */
.container {
  @apply bg-red-500;
}

@tailwind utilities;

3. 规避默认类名冲突（可选） #

Tailwind本身自带一个.container工具类，如果你想完全替换它的样式，要么在tailwind.config.js里修改默认配置，要么给自定义类换个名字（比如.custom-container），避免优先级混淆。

4. 重启开发服务器 #

修改配置文件后，必须重启npm run dev进程，让新配置生效。

验证方法 #

1. 保存所有修改的文件
2. 重新启动开发服务器
3. 打开浏览器开发者工具，查看目标元素的样式面板，确认.container类的bg-red-500样式已被正确应用

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