如何用vue cli 搭配Tailwind CSS開發
最近在技術社群和實體技術分享會都會聽到Tailwind的名字 ，想說這到底是什麼東西 ？討論熱度這麼高？稍微google了一下原來是CSS Framework？但就我以前對CSS Framework的印象不是都很肥大嗎？如果想要客製化樣式也也不是那麼方便（使出!important大法），所以只有前期維護舊專案會用到，後期幾乎都是自己手刻樣式。
不過在看完Tailwind的官網之後，真的讓我大開眼界，雖然Tailwind本體比Bootstrap還要肥大，但….居然可以把沒用掉的css全部刪掉，打包出來的CSS檔案大小不過幾10KB，對於這輩子看過1MB多的CSS我來說，這簡直就是一個夢幻的數字！完美解決的CSS框架最為人詬病的肥大問題。
Bootstrap、Material-UI、Bulma都是UI Framework，提供了現成的元件樣式供開發者套用，但需要客製化的話就要覆寫掉原本的樣式，而Tailwind則是Utility Framework(通用類別)，可以根據自身需求或是不同用途去客製化。
前置作業
建立好vue專案之後 ，只要執行 vue add tailwind 就會自動幫你安裝Tailwind並且產生設定檔，這邊會詢問你要建立哪種版本的tailwind config js
選none就不會產出tailwind.config.js了，因為想要自己定義變數， 所以先選擇minimal，如果選擇full版本 ，則會建立一個完整的設定檔、包含顏色定義、RWD定義、間隔定義等等鉅細彌遺地列出來，詳細的設定檔內容可以看這裡。
除了生成tailwind.config以外，會發現根目錄多了一個postcss.config.js
看到這裡才發現，原來Tailwind是PostCSS的套件之一！（官網明明就有寫🤣
一直以來提到PostCSS就會想到autoprefixer，但直到今天才知道除了能夠自動添加瀏覽器前綴之外，PostCSS還提供了很多套件可以使用
- cssnext — 可以使用最新的css語法
- styleLint — 檢查css語法是否有錯誤
- cssnano — 壓縮css
同時也會發現在assets底下多了一個tailwind.css檔案，自動幫我們引入base(reset.css)、components (元件樣式)、utilities(共用樣式)
在main.js引入tailwind.css (其實透過執行 vue add tailwind，已經自動幫我們引入好了)
import "./assets/tailwind.css";開始寫樣式吧
<div class="font-bold text-7xl text-green-500 justify-center items-center">hello</div>Tailwind的class具有語意化的設計，雖然很快就能上手，不過這樣一坨拉庫的class不是很好閱讀，如果又有很多地方要用到一樣的組合，就會不好維護，難道沒辦法把這些class整合在一起嗎？答案是有的，我們可以自己定義class，再將需要的樣式@apply進來，就可以實現自定義元件。
但這時會發現第二個class會出現紅色波浪符號，因為VSCode認定這是不合法寫法，有兩種方式可以解決這個問題
1. 只要將lang改成postcss就可以了
2.安裝VSCode擴充套件 styleLint，將tailwind排除在檢查的範圍之外，詳細設定請參考這篇文章 Visual Studio Code CSS linting with Tailwind
正當我覺得一切都準備就緒，執行yarn serve的時候卻報了PostCSS的error！讓人一頭霧水，明明我的專案就有安裝PostCSS，只好在Tailwind的官網找一下有沒有對應的說明，然後看到了這行字
Tailwind CSS requires Node.js 12.13.0 or higher.
立刻用nvm安裝12.13.x的Node穩定版本，就可以成功運行了！
搭配VSCode擴充套件開發
知道關鍵字，但想不起來完整的class名稱怎麼辦？沒關係！馬上安裝VSCode擴充套件 tailwindcss-intellisense ，只要輸入前幾個字，就會跳出對應的提示字，加速開發效率。
安裝完畢後，還需要調整VSCode一些相關設定才會生效
- 根目錄一定要有tailwind.config.js，擴充套件才會有反應
- 開啟emmet Completioms （in VSCode setting)
3.因為tailwind用了很多css看不懂的語法，為了防止出現大量的錯誤提示，要先將css.validate 改為false（in VSCode setting)
這時可能會發現一個問題，在一般的html上編輯class 確實會出現提示字，但是在vue template裡面卻是一點反應都沒有，這時就要在tailwindCSS.includeLanguages補上對應的設定，可參考tailwindcss-intellisense GitHub issues的這篇討論
重新開啟VSCode之後，撰寫class時就會出現提示字了 🎉（好不容易
總結一下，今天快速的試玩了一會Tailwind，可以理解為什麼近期這個CSS Framework這麼熱門了，光是擁有高度客製化的彈性和自動刪除用不到的樣式這兩大優點就能吸引不少人入坑了，雖然初始化設定的流程稍微複雜了一點（今天是因為用了vue-cli-plugin-tailwind，才省下不少步驟），但官網的文件寫得非常清楚，幾乎什麼問題都可以在上面找到解答，算是非常好上手，搭配任何框架也都沒問題，假如不用管古董級瀏覽器IE 9的話，真的非常推薦用Tailwind來開發！👏
