Vite中使用tailwindcss

安装tailwindcss生成tailwind.config.js文件

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

在tailwind.config.js中配置信息

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在style.css中引入tailwind样式

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

在vite.config.ts中配置tailwind插件

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default defineConfig({
  plugins: [
    tailwindcss,
    autoprefixer
  ],
})

完成