如何在React+Vite项目中配置Tailwind CSS？遇sm:类报错

一、先修复依赖冲突（解决全局安装问题） #

• 卸载全局Tailwind，避免本地/全局版本冲突：

  npm uninstall -g tailwindcss
  

• 本地安装Tailwind及必要依赖（PostCSS和Autoprefixer是Tailwind构建必需的）：

  npm install -D tailwindcss postcss autoprefixer
  

二、初始化配置文件 #

• 一键生成tailwind.config.js和postcss.config.js：

  npx tailwindcss init -p
  

三、核心配置：让Tailwind扫描你的组件 #

打开tailwind.config.js，修改content数组，确保Tailwind能识别到React组件里的类名：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 扫描src目录下所有React文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这是解决sm:类不存在的关键——如果Tailwind没扫描到你的组件，就不会生成对应的响应式类。

四、在全局CSS中引入Tailwind指令 #

找到项目的全局CSS文件（通常是src/index.css），添加以下内容：

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

同时确保这个CSS文件在入口文件（比如src/main.jsx）中被导入：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css' // 必须导入全局CSS
import App from './App.jsx'

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

五、添加自定义类 #

要自定义可复用的类，直接在全局CSS中用@layer包裹，Tailwind会自动处理这些类的优先级和响应式变体：

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

/* 自定义组件类 */
@layer components {
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition;
  }
}

/* 自定义工具类 */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.15);
  }
}

自定义类也支持响应式前缀，比如sm:btn-primary、md:text-shadow。

六、验证配置 #

重启Vite开发服务器：

npm run dev

在React组件中测试：

function App() {
  return (
    <div className="container mx-auto mt-8">
      <h1 className="text-2xl sm:text-4xl font-bold text-center">响应式标题测试</h1>
      <button className="btn-primary mt-4">自定义按钮</button>
      <p className="text-shadow mt-2">带阴影的示例文本</p>
    </div>
  )
}

export default App

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