Next.js+Tailwind项目如何按页面路径设置白名单跳过PurgeCSS

• 该需求完全可以实现，推荐使用CSS拆分方案，完全无需配置单个类的安全列表，仅对docs目录下的页面生效，不会影响其他页面的CSS体积。
• 具体操作步骤如下：
  1. 新建两份Tailwind入口样式文件
     在项目styles目录下新建两个CSS文件：
  • globals.css：全局通用样式，正常走Purge逻辑，供非docs页面使用，内容为常规Tailwind指令：

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

  • docs.css：docs页面专属样式，关闭Purge逻辑，内容如下：

    /* purgecss start ignore */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    /* purgecss end ignore */
    

  2. 按页面维度导入样式
  • 根目录的全局_app.tsx（Pages Router）或根layout.tsx（App Router）仅导入globals.css，作为全局通用样式。
  • 如果你用Pages Router，在src/pages/docs/目录下新建专属_app.tsx，仅在该文件中导入docs.css，所有docs下的页面都会继承该配置，仅加载全量Tailwind样式。
  • 如果你用App Router，在src/app/docs/目录下的根layout.tsx中导入docs.css，即可实现docs路由下的所有页面均使用无Purge的全量样式。
• 如果你不想拆分CSS文件，也可以通过Tailwind配置的safelist属性配合正则匹配，仅在生产环境加入你遍历tailwind.config.js生成的所有类名，不会污染全局安全列表，示例配置如下：

  /** @type {import('tailwindcss').Config} */
  // 提前遍历tailwind配置生成所有需要用到的动态类名
  const generateDocSafelist = () => {
    const safelist = []
    // 这里写你遍历theme生成类名的逻辑，比如遍历颜色生成bg-*、text-*等
    return safelist
  }
  
  module.exports = {
    content: [
      "./src/pages/**/*.{js,ts,jsx,tsx}",
      "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
    safelist: process.env.NODE_ENV === 'production' ? generateDocSafelist() : [],
    // 其他配置
  }
  

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