前言
在 2022 CSS 調查 中 Tailwind 都是最受歡迎、最多人使用的 CSS 框架，它開創性的設計理念打破了傳統語意化架構 CSS 的方式，於是問題來了：「需要學 Tailwind 嗎？」、「Tailwind 和 XX 框架要選哪一個？」、「要花多久學習？難度曲線會很高嗎？」……等問題。碰巧我比較早入坑也是它的愛用者，因此來分享一下心得。
Tailwind 基於 Utility-First 的理念，相較於傳統追求「語意化」的命名 CSS，所有的樣式都是以「工具」的形式提供，舉例官網首頁的例子：
這就是 Utility-First 的 CSS 寫法，感覺和直接寫行內 CSS 沒兩樣？如果你是一個遵從傳統「語意化 class 名稱」的開發者，可能會覺得這看起來是一種邪教！但敞開心胸去了解每種方式的利弊，會發現它們有各自的優缺點，並不存在純粹正確或錯誤的答案。
使用 Tailwind 的 3 大理由
為了方便讀者吸收，我會把所有特徵濃縮在三個要點之類，根據我使用上的心得，詳細還是可以看看更深入探討的文章～
-
事情簡單許多：
-
沒有重複的樣式：Tailwind 很聰明的會除去沒有用到的樣式，除了減少 CSS 的大小之外，在 2.1 版的 JIT 引擎可以在開發時飛快的產生出可使用的 CSS 檔案。
- 系統化：Tailwind 預設有完整的 CSS Reset 與設計系統，包含顏色、尺寸、字體樣式、陰影，你可以在 Tailwind 文件 找到完整的說明。使用預先建構好的設計系統讓你比起從頭手刻網頁更快速且有穩固一致的地基來建構網站。
不使用 Tailwind 的 3 個理由
有「應該使用的理由」外也應該考慮反方面導入這個工具對你的影響，這裡列出的理由是我在使用 Tailwind 的過程中可能會遇到的困難：
- 單純反對 Utility-First 的寫法：如果你討厭看似混亂的 class 名稱、只遵從傳統的語意化命名的開發者也沒事，這單純不是你的菜！
- 沒有耐心或能力去設計頁面：Tailwind 雖然提供很基礎的設計系統，但過多的自由與客製化可能會讓你無法控制網頁的樣式，這時候你可能需要一些 Tailwind 組件庫像是：DaisyUI、Flowbite、Tailwindcomponents 來解決這個問題。極端一點，如果你只是單純需要一個清晰好用的 UI ，並沒有一丁點想要客製化樣式的念頭，那麼現成的樣式庫會更適合你的需求，像是：Bootstrap、Pure。
- 獨特的學習曲線：如本篇文章標題「不需要學 Tailwind 也可以用 Tailwind」，學習它會是一個非常獨特的學習體驗，如果你熟悉原生 CSS 那麼整個體驗是非常愉快的。但如果對原生 CSS 不熟悉仍「強制」會需要熟悉 CSS，這個過程可能會讓人感覺很煎熬痛苦，但實際上大多時候只是在回頭學基礎的 CSS 而已，而不是某個樣式庫具體如何使用。
總結
要怎麼開始？我會建議先看看 Tailwind 官方文件，並且一邊在 Playground 試試水溫，這樣就可以在不用安裝任何東西的情況下就可以開始使用 Tailwind 了。正式使用可以再進入官方的文件中學習如何使用 NPM 安裝。
放手試試看吧！在我使用 Tailwind 之前，已經對 CSS 有一定的熟悉度，引此導入這個工具能夠能花更多心思去思考如何建構想要的網站，而不是太多時間去思考 CSS 的命名與建構設計系統；至於不熟悉 CSS 的新手就真的不曉得會是怎麼樣的體驗了 😅，但如果把 Tailwind 當成一個更抽象一層的 CSS 說不定也是一種不錯的學習路徑，謹記一次攻克一個區域的挑戰才不會有蠟燭兩頭燒的感覺 😑。
此外如果你是單純認為 Utility-First 不是一個好選擇，但又想要系統化的撰寫 CSS 可以考慮看看 Open Props。