Vite React+TS项目中Tailwind CSS工具类不生效问题求助

架构老林

2026-7-3

解决Tailwind CSS工具类不生效且未检测到类的问题

问题根源

你tailwind.config.js里的content配置路径写错了——里面的${js,ts,jsx,tsx}是无效的通配符格式，Tailwind没法匹配到你的源文件，所以才会提示未检测到工具类，导致自定义工具类不生效。

修正方法

把tailwind.config.js中的content数组改成正确的通配符格式，去掉多余的$符号：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], // 移除了无效的$符号
  theme: {
    extend: {},
  },
  plugins: [],
};

验证步骤

保存修改后的配置文件
重启Vite开发服务器（执行npm run dev）
在组件中使用font-extrabold、text-rose-700等工具类，检查样式是否生效

额外排查（若上述修复后仍有问题）

确认你已在src/index.css（或项目入口CSS文件）中正确导入Tailwind基础样式：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
确认入口文件（如src/main.tsx）已导入该CSS文件：
```
import './index.css';
```