Vue项目中Tailwind CSS在src子文件夹下无法加载的问题求助

1. 确保Tailwind配置覆盖所有目标文件 #

在项目根目录的tailwind.config.js中，确认content字段包含src下所有需要扫描的文件，保证Tailwind能识别组件中的类名：

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 配置PostCSS处理assets目录下的CSS #

如果项目没有postcss.config.js，在根目录创建该文件，内容如下：

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

这个配置会让PostCSS自动处理所有通过import引入的CSS文件，包括src/assets目录下的文件。

3. 检查CSS文件的内容与引入顺序 #

• 在src/assets/tailwind.css中写入完整的Tailwind指令：

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

• 在src/assets/main.css中，将@import './tailwind.css';放在最顶部，避免Tailwind样式被其他自定义规则覆盖：

@import './tailwind.css';

/* 自定义样式写在这里 */

4. 验证main.js的引入路径 #

在src/main.js中确认正确引入assets目录下的main.css：

import './assets/main.css'

5. 清除缓存并重启服务 #

缓存可能导致样式不生效，执行以下命令重置环境：

rm -rf node_modules .vite
npm install
npm run dev

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