Vite搭建的React项目中TailwindCSS样式不生效求助

核心问题排查与修复步骤 #

1. 修正tailwind.config.js的文件匹配路径 #

你的content配置仅能匹配src目录下的一级文件，无法识别子目录中的组件文件，导致Tailwind无法扫描到使用的类名。修改为以下配置：

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

2. 统一样式文件并确保正确引入 #

• 你在index.css中添加了Tailwind指令，但手动执行的watch命令指向的是input.css，二者未对应。建议直接保留index.css作为样式入口，删除input.css和output.css。
• 打开项目入口文件main.jsx（或main.js），确认已引入index.css：

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

3. 取消手动watch命令，依赖Vite自动处理 #

Vite会自动监听样式文件变化并编译，无需手动执行npx tailwindcss -i ./src/input.css -o ./src/output.css --watch，直接使用npm run dev启动开发服务即可。

4. 重启开发服务 #

修改配置后，关闭当前运行的开发服务，重新执行npm run dev，确保新配置生效。

额外检查点 #

• 确认组件中确实使用了Tailwind类名，例如：<div className="bg-blue-500 text-white p-4">测试样式</div>
• 打开浏览器控制台，检查是否有样式文件加载失败的报错信息

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