Next.js项目未安装Tailwind CSS时启动出现CSS加载错误，安装后恢复正常的问题咨询

为什么没装Tailwind时会报错？ #

这个错误TypeError: Cannot read properties of undefined (reading 'config')本质是Next.js的CSS处理链找不到有效的PostCSS配置：

• Next.js处理CSS时依赖css-loader和postcss-loader，这两个加载器需要读取PostCSS的配置文件（postcss.config.js）来完成样式编译、浏览器前缀补全等核心工作。
• 你初始化项目时可能没生成这个配置文件（比如用了极简模板、手动删除了配置，或是某些Next.js版本默认不自动生成），导致加载器尝试读取config属性时找不到目标对象，直接抛出未定义错误。
• 而安装Tailwind CSS时，官方的安装脚本会自动帮你生成合法的postcss.config.js（同时配置Tailwind相关插件），正好补全了Next.js需要的配置项，所以项目能正常启动了。

不用Tailwind也能解决的方案 #

方案1：手动添加PostCSS配置文件

这是最直接的解决方法，步骤如下：

1. 在项目根目录创建postcss.config.js文件
2. 写入Next.js兼容的最简配置：

   module.exports = {
     plugins: {
       autoprefixer: {},
     },
   };
   

   如果你需要更完整的功能支持（比如flexbox前缀、CSS变量兼容等），可以用这个进阶配置：

   module.exports = {
     plugins: {
       'postcss-flexbugs-fixes': {},
       'postcss-preset-env': {
         autoprefixer: {
           flexbox: 'no-2009'
         },
         stage: 3,
         features: {
           'custom-properties': false
         }
       }
     }
   };
   

3. 保存文件后，重启Next.js开发服务器（npm run dev），错误应该就会消失。

方案2：检查并更新Next.js版本

部分旧版本的Next.js在缺少PostCSS配置时会出现这个兼容性问题，你可以：

• 运行npm install next@latest更新到最新稳定版
• 检查next.config.js中是否有错误的CSS配置（比如误禁用了PostLoader），如果有，恢复默认的CSS处理设置。

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