Tailwind CSS v4与Vite集成异常：工具类未生成

问题现象 #

本地构建未生成Tailwind工具类，输出CSS仅包含带设计令牌的@theme层、CSS重置的@layer base层，但@layer utilities块只有@tailwind utilities;，组件中使用的类完全无效。

环境配置 #

• Tailwind CSS v4（tailwindcss@4.1.6）
• Vite（vite@5.4.19）
• React（react@18.2.0、@vitejs/plugin-react@4.0.0）
• 使用官方Vite插件@tailwindcss/vite@4.1.7
• 主JSX入口引入src/index.css，文件内容仅为@import "tailwindcss";

关键观察 #

• 使用Tailwind CDN时样式正常，确认HTML结构和类名无错误；
• 移除@import "tailwindcss";后，自定义CSS规则生效，问题与该@import语句的处理逻辑相关。

已尝试的排查步骤 #

• 确认@tailwindcss/vite插件已正确安装；
• 多次执行清理重装操作（删除node_modules、package-lock.json后重新安装依赖）；
• 检查index.css配置无误；
• 验证vite.config.js中已正确引入并启用tailwindcss插件；
• 显式配置content数组，甚至指定单个包含Tailwind类的文件路径；
• 在项目根目录的tailwind.config.js中配置content；
• 确认Vite可以正常解析组件文件路径；
• Node.js版本为v20.19.1

求助需求 #

Tailwind始终未扫描内容文件生成工具类，怀疑@tailwindcss/vite插件未触发内容扫描流程，求问是否有类似问题案例、版本兼容问题，或其他可尝试的排查方向。

配置文件代码 #

vite.config.js

import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  base: '/aphians',
  plugins: [
    tailwindcss(),
    react()
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  }
});

index.css

@import "tailwindcss";

package.json

{
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "vite --host",
    "start:debug": "vite --debug --logLevel info",
    "build": "vite build --base=/aphians"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^7.5.3"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.1.7",
    "@vitejs/plugin-react": "^4.0.0",
    "tailwindcss": "^4.1.6",
    "vite": "^5.0.0"
  }
}

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