Vite+React项目中Tailwind工具类无法生效问题求助

在Vite+React项目中使用Tailwind CSS时，遇到工具类完全不生效的问题。已尝试重启开发服务器、更新npm和Node.js版本，但问题仍未解决。查阅相关资料发现，多数同类问题要么是linting错误导致，要么是tailwind.config.js格式有误，但我排查后确认配置文件格式没问题，且当前问题并非linting错误引发，而是工具类本身无法生效。

遇到的现象 #

• 启动开发服务器时，终端弹出警告
• index.css文件检测出3个问题

项目配置文件 #

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

vite.config.js

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

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

postcss.config.js

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

package.json

{
  "name": "comparable-lists",
  "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.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3",
    "vite": "^5.2.0"
  }
}

核心源码文件 #

index.css

文件包含Tailwind基础指令，但检测出3个问题

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>,
)

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

App.jsx

import './App.css'

function App() {
  return (
    <main>
      <h1 className='text-red'>Tailwind with react with vite.</h1>
    </main>
  )
}

export default App

项目文件结构 #

采用标准Vite+React目录结构，所有配置文件放在项目根目录，源码集中在src文件夹内

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