1.安装

yarn add tailwindcss postcss autoprefixer -D

2.初始化配置

 // -p 表示创建一个基础的配置文件
 npx tailwindcss init -p

执行以上命令会生成tailwindcss.config.js配置文件，并且也会创建postcss.config.js文件

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

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

引入tailwind

将加载 Tailwind 的指令添加到你的 CSS 文件中 在assets下创建styles，在创建index.less

// /assets/styles/index.less

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

在main.ts中引入index.less

// main.ts
import { createApp } from 'vue'
import '@/assets/styles/index.less'   //  引入tailwind
const app = createApp(App)

app.mount('#app')

使用

   <button class='ml-10 bg-slate-900 p-3 text-[20px] hover:text-[30px]'>按钮<button>

vscode插件

在使用vscode开发时，我们可以安装一个Tailwind CSS IntelliSense插件，提示类名，来帮助我们更好的开发。

更详细请参考这位作者的文章，# TailwindCSS 的使用