第一步：通过 npm 安装 Tailwind

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

第二步：作为 PostCSS 插件来添加 Tailwind

在根目录新建一个文件“postcss.config.js”,添加以下内容

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

第三步：创建配置文件

npx tailwindcss init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。

// tailwind.config.js 
/** @type {import('tailwindcss').Config} */
module.exports = {
    purge: [
        './public/*.html',
        './src/**/*.vue',
        './src/**/*.ts',
        './src/*.vue',
        './src/*.ts',
    ],
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

使用 Tailwind 的 purge 选项来 tree-shake 优化未使用的样式，并优化您的最终构建大小当使用 Tailwind 删除未使用的样式时，很难最终得到超过 10kb 的压缩 CSS

第四步：引入tailwind样式

在main.ts文件中引入样式

// main.ts
import "tailwindcss/tailwind.css"

Tips:vscode代码提示插件“Tailwind CSS IntelliSense”