章節連結
原先的專案是使用 Bootstrap 5 並搭配巢狀的 scss 設置，不過隨著工具類的 css 撰寫工具如 Tailwind css 的興起，想說看能否與既有的 Bootstrap 搭配起來。這篇筆記下導入的過程，且為何不完全拔除 Bootstrap 5 的原因。
思維差異
1. Bootstrap 5 是以「元件」為單位，所以會有像是 Card, Navbar … 等已經組合好的樣式可以直接讓你套用
2. UnoCSS, Tailwind CSS … 等則拆分的更細，你可以直接在 html 的標籤內撰寫樣式(偽元素等都可以)，無需再額外起一個 css 檔案引入。雖說完整的大元件(如 Navbar, Card) 就得自己手刻，但也更加的客製化
為何使用 UnoCSS
1. 在力求保留 Bootstrap 5 的預設 Normalize CSS 和 Grid 撰寫方式的情況下，UnoCSS 可以視需求載入基本的 presetUno 和 presetTypography。
2. ‘container’ 這個 class 名稱在設定上會有衝突，可由調整 Uno theme 的 breakpoints 和 Bootstrap 原生對齊 + 客製化在 container 元素上補足 padding
3. 兼容多種 css 寫法，如 tailwindCSS, Bootstrap… 等，所以上手難度下降很多
UnoCSS 語法查詢
https://unocss.dev/interactive/
限制
1. 傳統的 CSS 寫法可輕易達成的「父層 hover，子層樣式進行變化」效果，用 group 來撰寫就顯得有些麻煩
2. 並非所有的 CSS 語法都可轉換成 UnoCSS，所以撰寫一些原生的 CSS 還是有必要
程式碼
https://github.com/andy922200/CV-Resume/commit/10ae29f47fcbb6e6822b9573f27e5b061a2dbcf2
參考資料
1. 一篇前端討論區抱怨文讓大家 Tailwind 功力更上一層(附上 Bootstrap 比較)
2. UnoCSS 簡化 CSS 的書寫，Nice！
