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

核心问题：Tailwind内容扫描路径格式错误 #

你的tailwind.config.js中content数组的文件扩展名匹配规则里，逗号后添加了空格：

content: ["./index.html", "./src/**/*.{js, ts, jsx, tsx}"],

这种写法会让Tailwind的glob匹配器将 js（带空格）识别为一个独立的扩展名，导致无法正确扫描src目录下的.js、.ts、.jsx、.tsx文件，因此不会生成bg-lime-400这类工具类样式。

修复步骤 #

将content配置中的扩展名匹配项空格移除，修改为：

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

额外验证项（可选） #

• 确认已安装必要依赖：tailwindcss、postcss、autoprefixer，未安装则执行：

  npm install -D tailwindcss postcss autoprefixer
  

• 重启Vite开发服务器，确保配置修改生效
• 检查index.scss中的Tailwind指令引入是否正确，你的当前写法无问题：

  @tailwind base;
  @layer base {
    html {
      @apply font-general
    }
  }
  
  @tailwind components;
  @tailwind utilities;
  

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