Vite+React项目中Tailwind CSS样式不生效问题求助

我通过Vite创建了React应用，按照Tailwind CSS V3官方Vite安装指南完成安装，但Tailwind样式完全不生效。目前仅安装了react-router-dom依赖，相关配置文件内容如下：

tailwind.config.cjs

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

index.css

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

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

解决步骤 #

• 补全Tailwind依赖安装
  执行以下命令安装Tailwind核心依赖及PostCSS工具：

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

• 检查PostCSS配置文件
  确保项目根目录存在postcss.config.cjs，内容如下：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

  若文件缺失，手动创建并添加上述配置。

• 验证样式引入优先级
  确保index.css在main.tsx中优先引入，避免其他样式文件覆盖Tailwind的基础样式。

• 重启服务并清理缓存
  停止当前Vite开发服务器，重新执行npm run dev启动，同时强制刷新浏览器（Ctrl+Shift+R）清除缓存。

• 测试基础样式
  在任意路由页面添加测试代码，验证样式是否生效：

  <div className="text-red-500 text-2xl font-bold">测试Tailwind样式</div>
  

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