vite配置tailwind

为了在Vite中使用Tailwind CSS，您需要按照以下步骤进行配置：

1. 安装Tailwind CSS和相关依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 在项目根目录下创建一个tailwind.config.js文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. 在项目根目录下创建一个postcss.config.js文件：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. 在Vite的配置文件中引入Tailwind CSS和PostCSS：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
})

5. 在应用程序中使用Tailwind CSS，例如在App.vue文件中：

<template>
  <div class="bg-gray-100">
    <h1 class="text-2xl font-bold">Hello, Tailwind CSS!</h1>
  </div>
</template>

<style>
/* 通过 @tailwind 前缀来使用 Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

现在，您已经成功地将Tailwind CSS集成到Vite中，可以开始使用它来构建漂亮的UI界面了。