记录一下vue3怎么引入并使用tailwind.css

根据tailwind官网的教程，vue3引入tailwind，只需要先输入“npm install -D tailwindcss” ，安装完成后，再输入“npx tailwindcss init”就能自动在项目的根目录里新建一个名称为tailwind.config.js的js文件。

但是我在这一步会报错，提示“npm error could not determine executable to run”

然后找了半天资料，反正大概意思就是tailwind 4.x的版本问题，在项目里用不了，然后解决办法就是安装tailwind 3.x的版本（重新执行一次 npm install -D tailwindcss@3.x postcss autoprefixer）

然后再次执行一次“npx tailwindcss init” 就能成功在根目录生成tailwind.config.js文件了

然后在tailwind.config.js修改一下配置，指定让样式生效的文件后缀

 接着，同样是在根目录下，新建postcss.config.js的文件，配置一下

 在上述两步完成了之后，打开main.js文件，引入样式

 最后最关键的一步，打开vite.config.js文件，配置一下红框部分内容

 以上步骤完成后，随便找个页面，在class里随便添加一个样式类名，如“bg-red-900”，看看有没有生效