iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Modern Web

TailwindCSS - 從零開始系列 第 30

TailwindCSS 從零開始 - 完賽心得

fireworks

完賽的內心小劇場

心得

感謝堅持到最後的自己,本次鐵人賽完賽了,最後一篇就來點軟性的心得文吧!
因為專案關係開始接觸 TailwindCSS,也用 side project 把玩一下,體會出滿多好處的,非常推薦大家使用看看,我自己的心得如下:

  1. 透過此框架開發讓我想到什麼就寫什麼,都不需要拘泥會不會影響到命名或是後續維護,畢竟想命名真的滿燒腦的。
  2. 開發到後面會發現很多重複的 class 名稱,這時再把這些元件化,會發現留下的都是不會重複的 class。
  3. JIT 模式一定要使用,用了就回不去了,誰還會想去記一些有的沒的擴充偽類 XD。
  4. 手刻能力還是要具備,不然會無法第一時間想到要用什麼屬性,畢竟這是 CSS 框架,基本的 CSS 語法還是要記得。
  5. 單一斷點的特性在開發 RWD 網頁滿省力的,不需要思考太多,可以專注在不同載具的樣式呈現。
  6. 壓縮過的 CSS 讓效能更高。
  7. 不需要特別找顏色,除非有指定色,不然已經很夠用。
  8. 手刻 + TailwindCSS 可以實現更高的客製樣式。
  9. 引入框架非常輕省,因為框架都有 webpack 基本上已經做掉很多事情,引入的方法也都很簡單,可以更專心在開發上使用。
  10. 框架不是全能,不能太過度依賴,縱使 TailwindCSS 已經非常好用。

這樣的話是否要放棄 Bootstrap 了呢?

也看到滿多網路有提出這樣的問題,我自己兩個都有寫過,感想是這樣,這個問題其實是錯的!每種技術出來都是解決問題用的,沒有完全只追新的技術,然後就放棄先前的技術,如果用這樣的觀念來踏入前端領域是很危險的,因為根本不知道被安排到要維護的舊專案使用的技術是什麼,難道現在有框架就不用學 jQuery 了嗎?如果客戶提出的需求就是需要這些技術,但「剛好」沒學到怎麼辦? 可能這個「剛好」就會讓你失業了也說不定!(是有點誇張了,但其實也沒有很誇張)

雖然 TailwindCSS 是高客製化的框架沒錯,但今天如果只是一次性的活動網頁,以後也不用維護了,那我會選擇 Bootstrap 套一套就好了,如果又是自己一個人開發,反正不用維護了,這樣還是最快的。

所以該學的還是學一學吧!

結語

以上就是這次 TailwindCSS 比較入門的學習內容,雖然還有很多設定沒有講到,但如果有跟完本次系列,應該是可以進行開發實作,未來有時間也會分享在個人部落格把遇到的問題與實作寫成筆記!感謝大家閱讀本次鐵人賽系列,若有錯誤還請各位前輩與後進不吝指教,謝謝大家!

TailwindCSS 有繁體中文翻譯文件,如果對於看英文版官方文件有點吃力的朋友,可以參考喔!


上一篇
TailwindCSS 從零開始 - TailwindCSS 3.0.0-alpha.1 釋出
系列文
TailwindCSS - 從零開始30
1
Mandy
iT邦新手 4 級 ‧ 2021-10-13 09:41:02

賀! 完賽

Tim Hsu iT邦新手 4 級 ‧ 2021-10-13 10:31:07 檢舉

感恩!終於可以去寫別的了(不是

0
Taiming
iT邦新手 4 級 ‧ 2021-10-13 09:41:59

恭喜完賽!

Tim Hsu iT邦新手 4 級 ‧ 2021-10-13 10:32:09 檢舉

感恩!

0
SuoChan 阿關
iT邦新手 4 級 ‧ 2021-10-13 09:55:39

恭喜 Tim 完賽!

Tim Hsu iT邦新手 4 級 ‧ 2021-10-13 10:31:37 檢舉

謝謝!

0
Kent
iT邦新手 5 級 ‧ 2021-10-13 11:16:20

恭喜完賽 Tim 大

0
json_liang
iT邦新手 4 級 ‧ 2021-10-13 12:34:59

恭喜完賽 一起等著美好的下午茶

Tim Hsu iT邦新手 4 級 ‧ 2021-10-26 21:00:24 檢舉

謝謝~期待下午茶

0
烏木白
iT邦新手 5 級 ‧ 2021-10-13 14:25:02

恭喜 Tim 完賽!

Tim Hsu iT邦新手 4 級 ‧ 2021-10-26 21:00:34 檢舉

謝謝~

我要留言

立即登入留言