Vite React项目无法识别TailwindCSS类，寻求技术解决方案

我试过Stack Overflow上的其他解决方案，也严格遵循Tailwind官方文档配置，但问题仍未解决。目前持续收到以下警告：

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

我检查了tailwind.config.js中的content数组，配置看起来没问题，希望能得到帮助。

文件结构 #

相关配置文件代码 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html", // <= add this
    "./src/**/*.{js,ts,jsx,tsx}", // <= no spaces
  ],

  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js #

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

main.jsx #

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

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

App.jsx #

import './App.css'

function App() {

  return (
    <>
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
    </>
  )
}

export default App

index.css #

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

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

package.json #

{
  "name": "polyprototype",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5"
  }
}

可尝试的排查步骤 #

• 重启Vite开发服务：修改配置后需重启服务才能生效，关闭当前npm run dev进程后重新启动
• 校验路径大小写：部分系统下Tailwind的文件扫描对路径大小写敏感，确保content中的路径与实际文件路径完全一致
• 尝试简化content路径：将./src/**/*.{js,ts,jsx,tsx}改为./src/**/*.jsx，缩小匹配范围测试
• 使用绝对路径配置content：引入path模块后用绝对路径指定文件，配置示例：

  import path from 'path'
  export default {
    content: [
      path.resolve(__dirname, './index.html'),
      path.resolve(__dirname, './src/**/*.{js,jsx}'),
    ],
    // ...其他配置
  }
  

• 清理缓存：删除node_modules/.cache目录后重新启动服务，或执行npm install重新安装依赖

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