今天繼續開發，重點著重在：初步探索Tailwind與理解App.vue。
之前的專案架構下是使用了boostap切版，這次先諮詢工作室前輩的建議，知道還有Quasar、Tailwind等選擇，由於一開始是先準備切一個簡單的登入畫面，故先選擇使用Tailwind來進行開發。
vue add tailwind
執行指令後，我選擇minimal讓我可以客製化tailwind.config.js文件。
在VS Code中安裝了Tailwind CSS IntelliSense和Headwind這兩個插件
IntelliSense：可以實時顯示CSS類名提示
Headwind：可以格式化和整理代碼
通過初步使用，我瞭解到Tailwind CSS利用utility-first的理念，將所有樣式封裝為單獨的類實現。可以非常靈活地組合類名構建自己需要的樣式。但對於如何讓代碼看起來再精簡一點，是今後的課題。
<head>載入CDN，必須用npm安裝fontawesome參考資料：
如何在vue環境下使用fontawesome：
官方文件的安裝流程
先使用了Taiwind本身跟vue結合的登入模板，再統整修改成跟設計稿一樣的畫面呈現。
今天第一次嘗試了Tailwind，覺得用法本身跟boostrap差不多，但是仍還有class名複雜化的問題，這應該是今後該處理的大目標。
iThome鐵人賽
看影片追技術