React+Vite项目使用module.scss后Tailwind CSS失效问题问询

核心原因 #

你把Tailwind的核心导入指令（@import "tailwindcss/base";等）放在了*CSS Module文件（style.module.scss）*中，而CSS Module会对所有类名进行哈希重命名，导致Tailwind生成的全局工具类无法被正确识别——虽然JSX里写的Tailwind类名能出现在HTML里，但对应的样式已经被CSS Module处理成了哈希后的类，自然无法匹配。

解决步骤 #

1. 拆分全局样式与CSS Module #

创建一个非模块化的全局样式文件（比如src/scss/global.scss），把Tailwind核心指令和全局样式移到这里：

// global.scss - 全局样式，不使用module后缀
// sass tools
@import 'utilities/variables', 'utilities/fonts', '/node_modules/rfs/scss', 'utilities/functions', 'utilities/mixins';
// global styles
@import 'normalize.css', 'base/typography';
// Tailwind全局指令
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

然后把原本的style.module.scss改成只包含局部模块化样式：

// style.module.scss - 仅用于局部自定义样式
// layout
@import 'layout/grid';
// components / widgets
@import 'components/button';
// pages specific styles
@import 'pages/home';

2. 调整导入逻辑 #

在main.jsx中导入全局样式（确保全局样式最先加载），App.jsx中继续导入CSS Module：

// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
// 先导入全局样式
import './scss/global.scss';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// App.jsx 无需修改，继续使用CSS Module
import cn from 'classnames';
import classes from './scss/style.module.scss';
import Header from './components/Header';
import Navbar from './components/Navbar';
import Profile from './components/Profile';

const App = () => {
  return (
    <div className={cn(classes.root)}>
      <Header />
      <Navbar />
      <Profile />
    </div>
  );
};

export default App;

3. 验证Tailwind配置 #

确保tailwind.config.cjs的content配置能正确扫描到所有使用Tailwind类的文件，当前配置是正确的：

module.exports = {
  content: ['./src/**/*.{html,js,jsx}', './index.html'],
  theme: {
    extend: {}
  },
  plugins: []
};

4. 可选：在CSS Module中使用Tailwind #

如果需要在局部模块化样式中复用Tailwind样式，可以用@apply指令：

// style.module.scss
.root {
  @apply container mx-auto p-4;
  // 自定义局部样式
  background-color: var(--bg-color);
}

关键说明 #

• CSS Module的设计目标是局部作用域样式，而Tailwind的工具类是全局作用域，两者不应该混在同一个文件中处理。
• 全局样式文件（无.module后缀）会被PostCSS正常处理，生成全局可访问的Tailwind工具类，而CSS Module文件仅处理自定义的局部样式。

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