Next.js中Tailwind CSS类名问题排查求助

错误信息（翻译） #

./app/globals.css:4:0
模块未找到：无法解析 './{'

请求模块的导入追踪：
./app/globals.css

核心问题定位 #

当前错误和page.js的类名无关，问题出在globals.css文件第4行，是CSS文件的语法错误导致模块解析失败，大概率是导入语句或大括号使用不当。

修复步骤 #

1. 检查globals.css第4行代码

   • 重点查看@import导入语句，比如是否写成了@import './{xxx.css}';这种错误格式，多余的大括号会导致解析失败，改成正常路径如@import './styles/utils.css';即可
   • 也可能是Tailwind指令或自定义CSS变量的大括号写错，比如@tailwind拼写错误、自定义主题时括号不匹配

2. 顺带修复page.js的潜在问题
   虽然当前报错不在page.js，但你的代码存在几个需要修正的点：

   • Link路由路径错误：href={@/app/${serie}} 不符合Next.js App Router规则，需去掉@/app前缀，改成href={/${serie.name}}（假设serie.name是路由标识）
   • map循环无返回值：episodes的map里没有返回组件，要改成箭头函数直接返回，同时添加key属性避免React警告：

     {serie.episodes?.map((episode) => (
       <Link key={episode.id} className={`bg-gradient-to-b from-[url("${episode.thumbnail}")] to-black flex items-end justify-end p-2 m-2 h-[300px] w-[640px] rounded shadow-md`} href={`/${serie.name}/${episode.id}`}>
         <h1>{episode?.name}</h1>
       </Link>
     ))}
     

   • 自定义类名md:star_gradient：如果这是自定义渐变类，需要在tailwind.config.js里配置自定义工具类，否则Tailwind会把未识别的类名清除

总结 #

先优先修复globals.css的语法错误，再处理page.js里的路由、循环和自定义类名问题，即可解决当前报错并优化代码。

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