安装依赖

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: [],
}

编写css文件

在项目的 src/assets/styles 中新建一个 tailwind.css

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

引入css

在项目的 main.js 中引入

import "@/assets/styles/tailwind.css";

接下来就可以愉快的使用 tailwind.css 了！