Next.js 14中Tailwind CSS类不生效问题求助

核心问题排查与修复步骤 #

1. 删除重复的Tailwind配置文件 #

你的项目同时存在tailwind.config.ts和tailwind.config.js，Tailwind CSS只会读取其中一个文件，直接导致配置冲突。保留其中一个即可：

• 若用TypeScript开发，推荐保留tailwind.config.ts，删除tailwind.config.js
• 若偏好JavaScript配置，保留tailwind.config.js，删除tailwind.config.ts

2. 检查globals.css内容是否正确 #

确保globals.css包含Tailwind核心指令，这是样式生效的基础：

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

如果缺少这些内容，即便引入了文件，Tailwind也无法生成对应样式。

3. 处理样式前缀（若保留带prefix的配置） #

如果选择保留带有prefix: "y"的tailwind.config.js，所有Tailwind类名必须添加y-前缀才能生效：

// 修改page.tsx中的类名
<p className="y-text-3xl y-font-bold y-underline">hello world</p>

如果不需要前缀，直接删除配置中的prefix: "y"即可。

4. 重启Next.js开发服务器 #

修改Tailwind配置或globals.css后，必须重启开发服务器才能让新配置生效：

# 停止当前服务后重新启动
npm run dev

5. 验证Content路径覆盖范围 #

确认保留的配置文件中，content数组包含你的页面路径./app/**/*.{js,ts,jsx,tsx,mdx}，目前你两个配置都已包含该路径，只需保证保留的配置里存在这条规则即可。

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