多Tailwind CSS配置文件冲突求助：不同页面样式相互干扰

方案1：给不同配置加专属前缀（最直接有效） #

在各自的Tailwind配置文件里添加prefix字段，让生成的类名带上专属前缀，从根源避免类名重复：

• 页面A的tailwind.config.a.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'a-',
  theme: {
    extend: {
      spacing: {
        '4': '1.5rem', // 自定义间距值
      },
    },
  },
  plugins: [],
}

• 页面B的tailwind.config.b.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'b-',
  theme: {
    extend: {
      spacing: {
        '4': '2rem', // 另一个自定义间距值
      },
    },
  },
  plugins: [],
}

之后给每个页面单独创建CSS入口文件，引入对应配置的Tailwind指令，再通过构建工具（如Vite、Webpack）配置多入口，让每个页面只加载自己的CSS产物。

方案2：用CSS Modules做样式隔离 #

把每个页面的Tailwind样式放到CSS Modules文件中，类名会被自动哈希化，彻底避免冲突：

• 页面A创建A.module.css：

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

在页面A组件中引入使用：

import styles from './A.module.css';

function PageA() {
  return <div className={`${styles['mt-4']}`}>页面A内容</div>
}

页面B同理创建B.module.css并对应自己的Tailwind配置，这样两个页面的类名会变成唯一哈希值，不会互相干扰。

方案3：拆分独立构建（适合完全分离的页面） #

如果页面A和B是完全独立的路由模块，可以用不同的构建命令指定各自的Tailwind配置：

• 在package.json中添加两个构建脚本：

{
  "scripts": {
    "build:a": "TAILWIND_CONFIG=tailwind.config.a.js react-scripts build",
    "build:b": "TAILWIND_CONFIG=tailwind.config.b.js react-scripts build"
  }
}

分别执行脚本构建两个页面，生成完全独立的CSS产物，部署后自然不会有冲突。

关键注意点 #

• 绝对不要在同一个构建流程里同时引入两个Tailwind配置，否则生成的CSS会合并，必然出现类名覆盖。
• 用React Router这类路由框架时，确保每个页面只加载对应配置生成的CSS，不要全局引入所有Tailwind CSS文件。

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