Vite+Vue项目中Tailwind CSS类不生效问题求助

1. 核对Tailwind配置的文件匹配路径 #

从你的配置截图来看，content数组配置的是：

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

对照你的目录结构，确认src下的所有.vue组件文件都能被这个通配符匹配到——比如组件在src/components或者更深的嵌套目录里，这个路径是能覆盖到的，但要注意有没有拼写错误（比如把src写成别的）。

2. 确认主CSS文件的Tailwind指令导入 #

你得在项目的主CSS文件（比如src/style.css或者src/assets/css/main.css）里加这三行：

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

而且要保证这个CSS文件已经在main.js/main.ts里导入了，比如：

import './style.css' // 路径要和你的实际文件位置对应
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. 检查组件里的类名使用 #

在Vue组件的<template>里直接写Tailwind类名，比如：

<template>
  <div class="bg-blue-500 text-white p-4">测试样式</div>
</template>

别在<style>标签里用这些工具类，Tailwind就是要直接在模板里用才生效。

4. 重新确认依赖安装和PostCSS配置 #

重新跑一遍安装命令，确保依赖都装对：

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

这步会生成tailwind.config.js和postcss.config.js，如果postcss.config.js没配置对也会出问题，它的内容应该是：

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

5. 重启Vite开发服务 #

改完配置文件后，别光刷新浏览器，把npm run dev停了重新启动，让配置生效。

6. 排查样式冲突 #

如果项目里有其他全局样式，可能会覆盖Tailwind的样式，可以先把其他全局样式注释掉，测试Tailwind类能不能生效。

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