Next.js中Tailwind CSS非黑白颜色不生效问题求助

核心问题：配置项名称不匹配 #

Tailwind CSS v4 将原配置中的content选项更名为files，你的tailwind.config.ts仍使用旧的content字段，导致Tailwind无法正确扫描到text-blue-500这类颜色类，因此未生成对应的CSS规则。

修复步骤 #

1. 修改Tailwind配置文件
   更新tailwind.config.ts，将content替换为files，同时确保导入正确的类型：

   import { Config } from 'tailwindcss';
   
   export default {
     files: [
       './app/**/*.{js,ts,jsx,tsx,mdx}',
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './src/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   } satisfies Config;
   

2. 清除缓存并重启服务
   执行命令清除Next.js和Tailwind的缓存：

   rm -rf .next node_modules/.cache
   

   然后重新启动开发服务器：

   npm run dev
   

3. 验证样式优先级
   你的body标签设置了color: var(--foreground)，若Tailwind颜色类生成正常，类选择器的优先级会高于元素选择器，从而覆盖默认文本颜色。若修改后仍有问题，可通过浏览器开发者工具检查h1元素的CSS规则，确认text-blue-500对应的color属性是否存在且未被其他样式覆盖。

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