在Next.js项目中使用Tailwind CSS时CSS导入失效如何解决？

核心原因 #

Tailwind CSS 要求所有 @import 语句必须放置在 @tailwind、@layer 等 Tailwind 专属指令之前，你当前将 @import './typography.css' 放在所有 @tailwind 指令之后，导致导入文件里的 Tailwind 规则无法被正确编译，或样式优先级异常被覆盖。

具体操作步骤 #

1. 调整入口CSS文件的代码顺序，将导入语句移到最顶部：

@import './typography.css';

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

2. 修改 typography.css 内容，将全局标题样式包裹在 @layer base 块中，保证样式被注入到正确的层级，不会被后续工具类覆盖：

@layer base {
  h1 {
    @apply text-6xl font-normal leading-normal mt-0 mb-2;
  }
  /* 其余h2、h3等标题样式依次写在这里 */
}

之前方案失败的原因 #

• 在typography.css中加@layer base报错：因为你把@import放在了@tailwind base之后，导入文件执行时找不到对应的@tailwind base声明，触发语法错误。
• 在@layer base中写@import不生效：Tailwind 本身不支持在@layer块内使用@import语句，所以样式不会被正常编译注入。

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