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

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

講古一下,雖然不是很重要 😂
其實這個部落格最一開始,是參考 Laravel China 的課程,使用 Laravel 6 與 Bootstrap 4 開發的作品
那個時候的我,對於前端可以說是完全沒有概念
不知道 Bootstrap 中各種奇怪的 class name 是什麼意思,只知道跟著課程打就對了
直到 Bootstrap 5 Beta 版本推出,有兩大重點更新

  • 放棄對 JQuery 的依賴
  • 放棄對 IE 的支援

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

結果可想而知, npm update 與 npm run dev 指令一下去,整個版面當然是豪不客氣的直接大崩壞
為了修復版面,我開始研究 Bootstrap,並藉此學習了一些 CSS 的基礎知識

後來 Laravel 8 推出,放棄對 Bootstrap 的支援,改為使用 Tailwind 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 詢問
基本上修正方法就是需要補回那些失去樣式的標籤
你也可以直接關閉 Preflight,但只是換個地方炸掉而已,沒有解決問題

 

結語


本次改版過程,雖然很累,但實在非常愉悅,有點驚豔 Tailwind CSS 的強大
部落格上線即將?已經?滿一年,不做點什麼慶祝一下說不過去

勉勵自己持續精進程式方面的技能 (必須是後端,不能不務正業)

sharkHead 後端工程師,稍微擅長 Laravel、Python 與 Google
對於前端有興趣,無奈沒什麼慧根
今天做完了大顆 Mode (Dark Mode)
Tailwind CSS 真的太好用啦~
sharkHead
2週前