关于在Vue项目中使用Tailwind CSS的问题

最近在学Vue，刚到创建项目的程度，但心血来潮想试试Tailwind CSS，毕竟实在是不会写CSS，但没想到一直报错，网上还找不到答案，实在是折磨人...

Tailwind Css v3.3.2的文档 https://www.tailwindcss.cn/docs/guides/vite#vue

今天根据该文档引入到我新创建的Vue项目后，npm run dev就报错：

实在是莫名其妙，我反复排查了好几遍，确定自己是按照文档一步步设置的，但还是报错。

只能去百度和Google，但都没有贴合的相关关键词，更没有贴合的解答：

我百思不得其解，以为是文档写的有问题，就去百度vue项目如何配置tailwind

确实有步骤的差异，文档v3.3.2没有这一步：

但尝试后还是失败，npm run dev仍然报错：

在失败多次后，我不得不回到报错信息上：每次都提示 某段css错误，但排查后写的又没有问题，所以怀疑是post css的配置问题，又搜了一大堆还是无果。

最后灵光一闪，只能是版本问题了吧！

我使用的是官方文档指令 npm init vue@latest 安装的vue，所以跳过了tailwind文档的第1步。

所以我在新文件夹重新按照文档指令npm create vite@latest my-project -- --template vue 安装了另一个vue项目，然后安装tailwind，最后果不其然， npm run dev成功运行。

我实在是理解不了，就去对比两个项目的差异：

结果两个命令安装的Vue和Vite版本不一样，集成的模板文件也不一样：

npm init vue@latest

该指令模板在assets文件里有两个css文件、无style.css文件、且组件中样式复杂，选择器和属性涉及较多

npm create vite@latest my-project -- --template vue

该指令模板在assets文件夹中无css，且有一个style.css(并非像tailwind文档所说需要创建一个文件）、且组件中样式简单，只有基本的选择器和属性

最后我有理由怀疑，是vue模板中的css文件和组件中的css，造成了postcss处理的bug

所以我把项目中所有css都删了，创建一个style.css文件, 根据官方文档配置Tailwind css

然后npm run dev，就成功预览了......大无语🥴疲れた.....

而且这是否意味着：我不能在使用tailwind的同时编写单独的css文件或者在vue组件中写css样式？

最后尽管解决了问题，在项目中启用了tailwind css，我还是不知道是什么原因，是哪些选择器，是哪些css属性，造成了bug，或者根本不是css的问题，而是项目版本兼容问题，不得而知。

最后希望有大佬看到这篇文章，能解答困扰我一下午的bug....