打开tailiwindcss的官网
点击这里选择3
然后点击这里
然后点击这里，就可以看到使用vite导入tailiwindcss的步骤
第一步骤 创建一个基本项目
这个步骤之前已经做过了
vite与tailwindcss创建大屏可视化项目-CSDN博客
https://blog.csdn.net/zhangxiaoguo_/article/details/159988481?spm=1011.2124.3001.6209
第二步骤
安装几个包npm install -D tailwindcss@3 postcss autoprefixer
所以我们现在直接从这里开始
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
可以看到在这里生成了一个文件
第三步骤复制这个
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
放到这里，这个意思表示我们会从index.html，以及src下面所有以vue,js,ts,jsx,tsx为结尾的文件中去使用tailiwindcss
第四步骤我们需要找到css添加这三行代码
@tailwind base; @tailwind components; @tailwind utilities;
这个位置的默认样式全部都不要
把尴尬才的三行代码放到这里来
第五步骤 npm run dev 直接启动
第六步 直接使用
在App.vue 里面我们试试
<template>
<div>
<div class="text-red-600 text-3xl">hello tailwind</div>
</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
可以看到这个效果，说明我们已经导入成功了
