解决vite项目tailwindcss不生效！！（Vue3、tailwindcss失效）
安装tailwindcss
vite自带安装了postcss，只需要安装tailwindcss
npm install -D tailwindcss
自动创建tailwind.config.js
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {// 配置需要使用tailwindcss的文件content: ['./src/views/**/*.{vue,ts,js}'],theme: {extend: {},},plugins: [],
}配置postcss.config.js
module.exports = {plugins: {// ...tailwindcss: {},}
}
全局样式文件添加以下内容
在全局样式文件css、less、scss文添加都可以。在main.js或者main.ts引入样式文件
// tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;
最后一步最重要，配置vite.config.ts!!!
vite.config.ts或者vite.config.js
export default defineConfig({// ...plugins: [// ...tailwindcss({config: 'tailwind.config.js', // Tailwind CSS 配置文件路径}),],
})