Next JS如何仅将Tailwind CSS应用到指定页面

核心逻辑是完全避免Tailwind样式全局注入，把Tailwind的所有样式（含Preflight、工具类）封装成作用域样式，只在需要的页面引入，不需要额外依赖第三方插件，Tailwind原生配置即可实现。 #

具体实现步骤（适配Next.js 13+ App Router / Pages Router） #

1. 修改tailwind.config.ts配置，从根源切断全局样式泄露路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 仅扫描需要使用Tailwind的页面、组件路径，减少冗余CSS生成
    './app/need-tailwind/**/*.{js,ts,jsx,tsx,mdx}',
    './components/tailwind/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  corePlugins: {
    preflight: false, // 全局关闭默认的Preflight基础样式重置
  },
  important: '.tailwind-scope', // 所有Tailwind生成的工具类、组件样式都会自动加上该选择器前缀，仅在带该类名的容器内生效
}

2. 单独新建Tailwind样式文件，例如app/tailwind-only.css，将所有Tailwind层包裹在作用域选择器内：

/* Preflight和所有Tailwind样式仅在.tailwind-scope容器内生效 */
.tailwind-scope {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

3. 仅在需要启用Tailwind的页面单独引入该CSS文件，同时给页面根容器加上tailwind-scope类名：
   以App Router页面为例，在app/need-tailwind/page.tsx中写入：

// 仅当前页面加载Tailwind样式，不会注入到全局
import '../tailwind-only.css'

export default function TailwindEnabledPage() {
  return (
    <div className="tailwind-scope">
      {/* 该容器内可正常使用所有Tailwind类名，Preflight默认重置也仅在此处生效 */}
      <h1 className="text-2xl font-bold text-blue-600">当前页面启用Tailwind</h1>
    </div>
  )
}

如果是Pages Router项目，Next.js原生支持页面级CSS引入，直接在对应页面文件中引入上述CSS、给根容器加作用域类名即可。 #

避坑说明 #

• 绝对不要在根布局layout.tsx/_app.tsx中全局引入Tailwind相关CSS文件，必须仅在需要的页面单独引入
• 未引入Tailwind样式文件、未包裹tailwind-scope容器的页面，完全不会加载任何Tailwind相关代码，原有样式不受任何影响
• 如果需要在Tailwind作用域内渲染第三方组件，直接将组件放在.tailwind-scope容器内部即可，样式兼容逻辑和全局引入Tailwind完全一致
• 如果项目有多个需要隔离的Tailwind页面，只需要统一使用同一个作用域类名、同一个Tailwind样式文件即可，不需要重复配置

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