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

运行项目 ～～～