最近在學(xué)Vue，剛到創(chuàng)建項(xiàng)目的程度，但心血來潮想試試Tailwind CSS，畢竟實(shí)在是不會(huì)寫CSS，但沒想到一直報(bào)錯(cuò)，網(wǎng)上還找不到答案，實(shí)在是折磨人...

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

今天根據(jù)該文檔引入到我新創(chuàng)建的Vue項(xiàng)目后，npm run dev就報(bào)錯(cuò)：

實(shí)在是莫名其妙，我反復(fù)排查了好幾遍，確定自己是按照文檔一步步設(shè)置的，但還是報(bào)錯(cuò)。

只能去百度和Google，但都沒有貼合的相關(guān)關(guān)鍵詞，更沒有貼合的解答：

我百思不得其解，以為是文檔寫的有問題，就去百度vue項(xiàng)目如何配置tailwind

確實(shí)有步驟的差異，文檔v3.3.2沒有這一步：

但嘗試后還是失敗，npm run dev仍然報(bào)錯(cuò)：

在失敗多次后，我不得不回到報(bào)錯(cuò)信息上：每次都提示 某段css錯(cuò)誤，但排查后寫的又沒有問題，所以懷疑是post css的配置問題，又搜了一大堆還是無果。

最后靈光一閃，只能是版本問題了吧！

我使用的是官方文檔指令?npm init vue@latest 安裝的vue，所以跳過了tailwind文檔的第1步。

所以我在新文件夾重新按照文檔指令npm create vite@latest my-project -- --template vue 安裝了另一個(gè)vue項(xiàng)目，然后安裝tailwind，最后果不其然， npm run dev成功運(yùn)行。

我實(shí)在是理解不了，就去對(duì)比兩個(gè)項(xiàng)目的差異：

結(jié)果兩個(gè)命令安裝的Vue和Vite版本不一樣，集成的模板文件也不一樣：

npm init vue@latest

該指令模板在assets文件里有兩個(gè)css文件、無style.css文件、且組件中樣式復(fù)雜，選擇器和屬性涉及較多

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

該指令模板在assets文件夾中無css，且有一個(gè)style.css(并非像tailwind文檔所說需要?jiǎng)?chuàng)建一個(gè)文件）、且組件中樣式簡單，只有基本的選擇器和屬性

最后我有理由懷疑，是vue模板中的css文件和組件中的css，造成了postcss處理的bug

所以我把項(xiàng)目中所有css都刪了，創(chuàng)建一個(gè)style.css文件, 根據(jù)官方文檔配置Tailwind css

然后npm run dev，就成功預(yù)覽了......大無語??疲れた.....

而且這是否意味著：我不能在使用tailwind的同時(shí)編寫單獨(dú)的css文件或者在vue組件中寫css樣式？

最后盡管解決了問題，在項(xiàng)目中啟用了tailwind css，我還是不知道是什么原因，是哪些選擇器，是哪些css屬性，造成了bug，或者根本不是css的問題，而是項(xiàng)目版本兼容問題，不得而知。

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