React-TypeScript(Vite)集成TailwindCSS失效，提示未检测到工具类

问题现象 #

添加.prettierrc文件后，TailwindCSS完全无法生效，启动项目时出现以下警告：

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

添加.prettierrc前一切正常。

项目目录结构 #

│   .eslintrc.json
│   .gitignore
│   .prettierrc
│   index.html
│   package-lock.json
│   package.json
│   postcss.config.cjs
│   tailwind.config.cjs
│   tsconfig.json
│   tsconfig.node.json
│   vite.config.ts
│
├───.vscode
│       settings.json
│
├───public
│       litaci-logo.png
│       litaci.png
│
└───src
    │   App.tsx
    │   index.css
    │   main.tsx
    │   vite-env.d.ts
    │
    ├───components
    │       Navbar.tsx
    │
    ├───containers
    │       Page.tsx
    │
    ├───pages
    │       Root.tsx
    │
    └───store

当前tailwind.config.cjs配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js, jsx, ts, tsx}',
    './src/pages/**/*.{js, jsx, ts, tsx}',
    './src/components/**/*.{js, jsx, ts, tsx}',
    './src/containers/**/*.{js, jsx, ts, tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

解决方案 #

1. 修复Tailwind配置中的glob路径格式 #

content字段里的glob模式中，逗号后不能有空格，否则会导致文件匹配失败。修改后的配置可简化为：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. 确认Tailwind样式指令的引入 #

检查src/index.css是否包含以下核心指令：

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

同时确保main.tsx中已正确引入该CSS文件：

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

3. 排查Prettier配置的影响 #

• 若安装了prettier-plugin-tailwindcss，确保其在.prettierrc的插件列表中，且版本与TailwindCSS兼容：

  {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
  

• 暂时注释或移除.prettierrc的部分配置，重启项目测试是否是Prettier导致类名解析异常。

4. 重启Vite开发服务器 #

修改配置文件后，必须重启Vite才能让新配置生效。

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