NextJS v13样式表顺序问题：自定义SCSS与Tailwind样式冲突

问题背景 #

迁移至NextJS v13 App Router后，使用SCSS结合Tailwind开发时出现以下问题：

• NextJS自动拆分生成layout.css和page.css两个样式表，加载顺序直接影响样式优先级
• 默认导入顺序下，自定义Card组件样式优先级高于Tailwind工具类（如border-orange-300），导致Tailwind样式不生效
• 调整导入顺序后，Tailwind工具类生效，但自定义Input样式被Tailwind基础样式覆盖
• 不想使用!important，且迁移至NextJS v13前无此类问题

解决方案 #

1. 用Tailwind @layer指令管理自定义SCSS样式 #

将自定义组件样式（如Card、Input）包裹在@layer components中，让Tailwind将其纳入自身的样式优先级体系：

// styles/app.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  // 自定义Card样式
  .Card {
    border: 1px solid #e5e7eb;
    // 其他自定义样式
  }

  // 自定义Input样式
  .Input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    // 其他自定义样式
  }
}

Tailwind的优先级层级为：base < components < utilities，因此：

• 自定义组件样式（@layer components）会和Tailwind自带组件类处于同一层级
• Tailwind工具类（如border-orange-300属于utilities）优先级更高，自动覆盖组件样式
• 自定义Input样式不会被Tailwind基础样式（base）覆盖

2. 固定全局样式导入顺序 #

保持layout.tsx中先导入全局SCSS文件，确保全局样式作用于所有子页面：

// layout.tsx
'use client';
import '../../styles/app.scss';
import { Layout } from '@app/components/layout.component';

App Router中layout的样式会作为全局基础样式加载，无需调整导入顺序即可保证层级正确。

3. 简化组件选择器 #

避免使用嵌套选择器（如.Card .header）或ID选择器，保持自定义样式的选择器与Tailwind类一致（仅用类选择器），确保优先级相同，后添加的类自动生效：

// Card组件使用示例
<Card className={clsx(post.book ? 'border-orange-300' : '')}>
  {/* 组件内容 */}
</Card>

4. 检查Tailwind配置正确性 #

确保tailwind.config.js正确扫描所有组件文件，PostCSS配置正常：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

原理说明 #

NextJS v13 App Router会根据组件层级拆分样式表，导致传统CSS加载顺序控制优先级的方式失效。而Tailwind的@layer系统会将自定义样式编译到对应优先级层级，脱离对样式表加载顺序的依赖，从根源解决优先级冲突问题。

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