为何@tailwind utilities突然失效？Next.js环境SCSS解析报错

环境信息 #

• Next.js 15（App Router）
• Tailwind CSS 3.4.10
• PostCSS 8
• Sass 1.87.0
• pnpm
• HeroUI v2.7.8（使用@heroui/react）

问题现象 #

运行pnpm dev时触发报错：

Parsing css source code failed
./src/styles/globals.scss.css (22:3)
p:not(:first-of-type) {
@apply mt-3;
^

系统错误地将globals.scss识别为globals.scss.css，并在@apply语句的分号位置抛出解析失败错误。

相关代码文件 #

globals.scss #

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

@import "boxicons/css/boxicons.min.css";

.wrapper {
  @apply max-w-5xl mx-auto p-5;
}

p:not(:first-of-type) {
  @apply mt-3;   // ← 错误位置
}

postcss.config.js #

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

tailwind.config.js #

const { heroui } = require('@heroui/react');

module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { extend: {} },
  darkMode: 'class',
  plugins: [heroui()],
};

已尝试的无效解决方案 #

• 确认仓库内不存在globals.scss.css文件
• 清理.next、node_modules、lockfile缓存后重新安装依赖
• 将Tailwind版本从3.4.11降级至3.4.10
• 安装并配置postcss-scss（指定syntax: 'postcss-scss'）
• 将@tailwind utilities;迁移至纯CSS导入文件中
• 验证导入语句为import '@styles/globals.scss';
• 确认所有配置严格遵循HeroUI和Tailwind官方文档，未做自定义修改

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