vite+vue3.0 使用tailwindcss

 参考资料： 安装 - TailwindCSS中文文档 | TailwindCSS中文网

npm install -D tailwindcss

npm install postcss

npm install autoprefixer

npx tailwindcss init -p

 生成/src/tailwind.config.js和/src/postcss.config.js配置文件

在/src/tailwind.config.js配置文件中添加所有模板文件路径

新建/src/resources/tailwind.css文件；在文件中添加：

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

在/src/main.ts中进行引用

import "./resources/tailwind.css";

 在vue文件中使用

<template><div class="h-full"><h1 class="text-3xl font-bold underline">Hello world!</h1><div class="flex"><div class="flex-none h-10 w-[80px] bg-red-400" >11</div><div class="flex-1 h-10 bg-orange-400">22</div><div class="flex-1 h-10 bg-lime-400">33</div></div></div>
</template><script setup lang="ts"></script><style lang="scss" scoped></style>

在VScode编辑器中添加扩展