解决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 配置文件路径}),],
})

运行项目 ～～～