Next.js 中 Tailwind CSS 结合 Sass 编译报错问题求助

嘿，我一眼就瞅出问题所在了——你代码里的#-{important}是完全错误的语法，不管是Tailwind还是Sass都不认这个写法，这直接导致Sass解析卡壳，抛出了expected "{"的错误。

问题根源 #

Tailwind里给@apply的样式加!important权重，有两种标准写法，根本不需要用这种奇怪的Sass插值格式：

1. 给单个Tailwind类加!前缀（更推荐，贴合Tailwind的语法规范）
2. 给整个@apply块统一加!important

修正后的完整代码 #

把你globals.scss里所有的#-{important}替换成正确写法就行，下面是调整后的代码：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/Header/Header.module.css";
@import "tailwindcss/utilities";

@layer base {
 body {
 /* 写法1：给需要的类逐个加!前缀，精准控制权重 */
 @apply !text-white !w-screen !h-screen font-["-apple-system","poppins"];
 /* 写法2：给整个@apply块统一加!important，适合批量设置 */
 /* @apply (text-white w-screen h-screen font-["-apple-system","poppins"]) !important; */
 }
 a {
 @apply active:!bg-[#ffffff]/20 focus:!bg-[#ffffff]/20;
 }
}

@layer components {
 .filter-white {
 filter: invert(93%) sepia(91%) saturate(32%) hue-rotate(336deg) brightness(107%) contrast(99%);
 }
 .navbar {
 @apply !p-0 !min-h-[4px] !bg-[#141414]/20 backdrop-blur-lg text-sm leading-[4px];
 }
}

额外提示 #

• 两种写法都要求Tailwind版本在v3及以上，如果你用的是旧版本，可能只能用第二种写法。
• 替换完代码后记得重启Next.js开发服务器，编译错误应该就能彻底消失了。

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