添加Tailwind插件后NextJS应用卡在编译阶段问题排查

云原生阿岚

2026-6-15

问题排查与解决方案

插件未安装：你仅在配置文件里引入了tailwindcss-animate和@tailwindcss/typography，但大概率没安装这两个依赖包。执行以下命令完成安装：
```
npm install tailwindcss-animate @tailwindcss/typography
# 用 yarn 的话执行：
yarn add tailwindcss-animate @tailwindcss/typography
```
版本兼容性冲突：Tailwind CSS与插件版本不匹配会导致编译卡死。检查package.json里的Tailwind版本：
- 若使用Tailwind v3.x，直接安装插件最新版即可；
- 若为旧版Tailwind，需降级插件到对应兼容版本。
清除编译缓存：Next.js的缓存可能引发异常，执行以下命令清理后重启服务：
```
rm -rf .next node_modules/.cache
npm run dev
```
定位问题插件：可以尝试单独启用一个插件测试——先只开启tailwindcss-animate，确认服务正常后再启用@tailwindcss/typography，以此定位具体是哪个插件导致的编译卡住。