NextJS+Tailwind项目拆分明暗模式CSS文件方案咨询

针对你的NextJS+Tailwind项目，可以通过Tailwind CLI多配置编译或NextJS Webpack自定义规则两种方式拆分CSS文件，以下是具体实现：

方法一：Tailwind CLI多配置文件编译 #

通过创建两个Tailwind配置文件，分别编译亮色（无dark变体）和暗色（仅dark变体）样式：

1. 创建两个Tailwind配置文件

   • tailwind.config.light.js（亮色模式，不生成dark变体）：

     module.exports = {
       content: ["./src/**/*.{js,ts,jsx,tsx}"],
       darkMode: false, // 禁用暗色模式，不生成任何dark前缀的样式
       theme: { extend: {} },
       plugins: [],
     };
     

   • tailwind.config.dark.js（暗色模式，仅生成用到的dark变体）：

     module.exports = {
       content: {
         files: ["./src/**/*.{js,ts,jsx,tsx}"],
         extract: {
           jsx: (content) => content.match(/dark:[a-zA-Z0-9-]+/g) || [], // 仅提取项目中用到的dark:类
         },
       },
       darkMode: "class",
       theme: { extend: {} },
       plugins: [],
     };
     

2. 创建两个入口CSS文件

   • src/styles/light.css：

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

   • src/styles/dark.css（内容和亮色入口一致，后续会被编译为仅含dark变体的样式）：

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

3. 添加编译脚本
   在package.json中添加CLI编译命令：

   "scripts": {
     "build:tailwind:light": "tailwindcss -c ./tailwind.config.light.js -i ./src/styles/light.css -o ./public/light.css",
     "build:tailwind:dark": "tailwindcss -c ./tailwind.config.dark.js -i ./src/styles/dark.css -o ./public/dark.css",
     "build:tailwind": "npm run build:tailwind:light && npm run build:tailwind:dark"
   }
   

4. 在NextJS中动态引入
   在_app.jsx/_app.tsx中根据用户主题偏好动态加载CSS：

   import { useEffect, useState } from "react";
   
   function MyApp({ Component, pageProps }) {
     const [isDark, setIsDark] = useState(false);
   
     useEffect(() => {
       // 检测系统主题
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const updateTheme = (e) => {
         setIsDark(e.matches);
         if (e.matches) {
           document.head.insertAdjacentHTML("beforeend", '<link rel="stylesheet" href="/dark.css">');
         } else {
           document.querySelector('link[href="/dark.css"]')?.remove();
         }
         document.documentElement.classList.toggle("dark", e.matches);
       };
   
       updateTheme(mediaQuery);
       mediaQuery.addEventListener("change", updateTheme);
       return () => mediaQuery.removeEventListener("change", updateTheme);
     }, []);
   
     return <Component {...pageProps} />;
   }
   
   export default MyApp;
   

方法二：NextJS Webpack自定义规则拆分 #

通过修改Webpack配置，结合PostCSS插件过滤选择器，实现同一Tailwind编译后拆分出亮色/暗色CSS：

1. 安装PostCSS过滤插件

   npm install postcss-selector-filter --save-dev
   

2. 修改next.config.js
   添加Webpack规则分别处理亮色和暗色CSS：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     webpack: (config) => {
       // 获取默认CSS loader配置
       const cssRule = config.module.rules.find((rule) => rule.test.test(".css"));
   
       // 亮色CSS规则：过滤掉所有含.dark的选择器
       config.module.rules.push({
         test: /\.light\.css$/,
         use: [
           ...cssRule.use,
           {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
                 plugins: [
                   require("postcss-selector-filter")((selector) => !selector.includes(".dark")),
                 ],
               },
             },
           },
         ],
       });
   
       // 暗色CSS规则：仅保留含.dark的选择器
       config.module.rules.push({
         test: /\.dark\.css$/,
         use: [
           ...cssRule.use,
           {
             loader: "postcss-loader",
             options: {
               postcssOptions: {
                 plugins: [
                   require("postcss-selector-filter")((selector) => selector.includes(".dark")),
                 ],
               },
             },
           },
         ],
       });
   
       return config;
     },
   };
   
   module.exports = nextConfig;
   

3. 创建并引入CSS文件

   • 同方法一创建src/styles/light.css和src/styles/dark.css
   • 在_app.jsx/_app.tsx中静态引入亮色CSS，动态加载暗色CSS（逻辑同方法一）

关键优化点 #

• 确保Tailwind的content配置仅包含项目实际用到的文件，进一步压缩CSS体积
• 动态加载暗色CSS时，可使用rel="preload"优化首次加载速度
• 两种方法都能实现将原65KB的CSS拆分为亮色（核心样式）和暗色（仅变体）两个更小的文件

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