將部落格從 Bootstrap 5 改版至 Tailwind CSS 的心得

又發了一篇關於前端的文章，真的是不務正業的後端 😅，但分類在日常分享應該沒關係吧？

講古一下，雖然不是很重要 😂。

其實這個部落格最一開始，是參考 Laravel China 的課程，使用 Laravel 6 與 Bootstrap 4 開發的作品，那個時候的我，對於前端可以說是完全沒有概念，不知道 Bootstrap 中各種奇怪的 class name 是什麼意思，只知道跟著課程打就對了。

直到 Bootstrap 5 Beta 版本推出，有兩大重點更新。

前端聽到這兩點應該都很開心，但那時候的我 (菜雞) 只知道好像很厲害的感覺？單純的我，想說是不是可以來改版一下。

在 package.json 中將 Bootstrap 從 4 升級到 5，然後 npm update 與 npm run dev 指令一下去，結果可想而知，整個版面直接大崩壞，為了修復版面，我開始研究 Bootstrap，並因此學習了一些 CSS 的基礎知識。

結果改了沒多久，Laravel 8 推出，有不少重大更新，其中一個更新就是前端 CSS 框架從原本的 Bootstrap，改為使用 Tailwind CSS。

如果還不知道什麼是 Tailwind CSS，可以參考 fireship 的 100 秒介紹影片 (介紹得非常好，優缺點一起講)。

當時 CSS 框架的更動讓社群中一部份人士不能接受，雖然那時候的我也知道市面上有各式各樣好用的 CSS 框架，但我非常好奇為什麼 Laravel 的作者會特別喜歡 Tailwind CSS。

單純想沒有結果，直接使用看看吧！

看了網路上許多介紹與教學影片，並實際把玩了一下之後，我豪不意外 Laravel 的作者會喜歡它。

如果 Bootstrap 的概念是打包常用的網頁組件 (如 button、input 或是常用的 Card 特效)，那麼 Tailwind CSS 就是把常用的網頁組件，又拆成更細的零件 (如背景顏色、框框與字體顏色)。

Tailwind CSS 這麼做的好處就是可客製化程度更高，此外，你還可以使用 PurgeCSS，將沒有使用的 class name 移除，讓產出的 CSS 檔案更為輕量，減少網頁讀取的負擔。

我之前就想過將部落格從 Bootstrap 5 改成使用 Tailwind CSS，但一直缺乏動力 (可能是上次 Bootstrp 升版到 5 花了我不少時間的緣故)。

但是…

這個部落格上線好像滿一年了…

為了慶祝，我還是下定決心來大動工一下。

部落格改版心得

不得不說 Tailwind CSS 是真的很香，原定花一週的時間慢慢修改，結果卻不小心陷進去，然後就是不吃不喝 (並沒有) 熬夜去做改版。

耗費了四天 (兩天假日，兩天平日晚上)，終於將部落格的前端 CSS 框架從 Bootstrap 5 改成 Tailwind CSS。

這邊說說我的改版心得 (正文開始)。

高度可客製化前面我已經提到很多次了，這邊就不再廢話拉～

來說點別的。

首先最讓我覺得讚不絕口的，Tailwind CSS 要做 RWD (Responsive Web Design，響應式網頁設計)，實在是非常方便，只要在 class name 前面加上前綴 sm、md、lg，你就可以很輕鬆的做好 RWD。

<div class="hidden sm:flex md:jutify-center lg:items-center"></div>

再來是你可以上網查看各種網友分享自己做好的精美組件 (或是買官方做好的，終身價 149 鎂)，你可以從中學習並修改成自己想要的樣式，或是直接拿來用 🤣。

官方的 Youtube 頻道 Tailwind Labs 也會時常分享一些設計精美的組件，拍影片的是一位帥氣又可愛的金髮大叔。

再來是相當快速的 JIT Mode (Just In Time)，會即時掃描你指定的檔案並產出輕量化後的 CSS 檔案，在這個模式之下，原本部分特效要自行開啟的 variants (如 hover、active、focus)，JIT 都可以直接幫你生成，不用在設定檔案中特別設定。

聽起來 Tailwind CSS 好像超讚的，但是凡事總有個…

But！

這次改版也是有遇到一些問題需要克服，而造成問題的來源就是 Tailwind CSS 的 Preflight，Preflight 預設會關閉一些標籤的基礎樣式，讓跨瀏覽器的開發更為一致與方便。

貼心的設計，但這也讓我遇到一個麻煩。

也就是 WYSIWYG (What you see is what you get) 編輯器中的部分樣式會直接失效，例如底下這些常見的標籤。

<!-- 底下這些標籤預設的 CSS 效果直接掰掰 -->
<p></p>
<h1></h1>
<ul>
    <li></li>
</ul>

因此部落格所使用的 CKEditor，其寫出來的樣式就會變得很奇怪，也有人在 Tailwind CSS 官方的 repo 開出 issue 詢問，基本上修正方法就是需要補回那些失去樣式的標籤，或是使用官方的套件 Typography。

當然你也可以直接關閉 Preflight，但只是換個地方炸掉而已，沒有解決問題。

應該是收到太多為什麼排版炸掉的問題了，所以官方後來發布了一個新的 Tailwind CSS 套件 Typography，用來解決需要標籤基本樣式的地方 (例如文章排版)。

可以參考 Tailwind Labs 對 Typography 的介紹影片。

本次改版過程，有點驚豔 Tailwind CSS 的強大，部落格上線即將？已經？滿一年，不做點什麼慶祝一下說不過去。

前幾天小弟在 Twitter 上看到一則很棒的推文，來自 Laravel 團隊的 Mohamed Said。

小弟覺得學習語言從框架開始是個不錯的方式，利用框架的便利性，自己打造一個 project，讓自已從寫程式中獲得成就感並建立興趣。

但工程師不能只滿足於使用框架，而是要繼續學習並深入探究原理，畢竟程式語言是相當博大精深的 (汗)。

勉勵自己持續精進程式方面的技能。