tailwindcss安装以及配置

一、安装tailwindcss

npm install -D tailwindcss postcss autoprefixer

二、使用 Tailwind CLI 来为项目生成 Tailwind 配置文件 与 postcss 配置文件
注意，在此处如需要生成其他配置文件，例如：TypeScript 配置文件 则使用 “ --ts”，具体其他配置文件请参考官网 “配置”。

npx tailwindcss init -p  --ts

三、当生成并出现 后，需要在导出的对象中content[]数组配置添加所需模版文件的路径，即为将要写到哪类后缀模版文件，就需要写入该文件路径及后缀。

content[
 "./index.html",
 "./src/**/*.{vue,js,ts,jsx,tsx}",
]

四、在src/assets文件夹中创建名为main.css的文件（文件名任意，个人建议命名为主css文件），将Tailwind CSS指令放入该文件中(在 “@tailwind” 这样的自定义CSS规则中，会出现警告提示。

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

具体参考: vue.js - 如何在Vue3项目中安装使用Tailwind CSS 以及通过Tailwind CSS插件实现卡片的3D翻转效果？ - 愈宇垣 - SegmentFault 思否