初始化项目

本次安装时的版本3, 不适用于版本4

npm install -D tailwindcss@3 postcss autoprefixer

安装后，使用 npx 命令生成 tailwind.config.js 和 postcss.config.js 配置文件：

npx tailwindcss init -p

配置项目文件

接下来，先配置 Tailwind 来移除生产环境下没有使用到的样式声明：

// tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 tailwind.config.js 文件中，配置 content 选项指定所有的 pages 和 components 文件

然后，在 ./src/assets/main.css 中添加以下内容：

/* ./src/assets/index.css */

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

现在，运行 npm run dev, Tailwind CSS 就可以在您的 Vue 3 and Vite 项目中使用了。