iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 11
4
影片教學

CSS 優良部份系列 第 11

【Tailwind CSS 教學 - 4 】utility first 有機會成為未來 CSS 王者?


環境介紹完,也終於開始進入重頭戲,在 Tailwind 的介紹中,第一大點就在介紹 utility 的優勢所在,這裡我也分享 Tailwind 文件裡所寫的 utility first 的優勢所在。

Tailwind 三大優勢

  1. 再也不用想命名,例如 sidebar-inner-wrapper,因為所有都是 utility class,例如 .mt-1、.tetx-xl
  2. CSS 不會因為網站而變得更肥大,因為都是用同套的 CSS 在組出自己要的樣式
  3. CSS 更改上更安全,一個 class 負責一個功能,所以就算任意拿掉一個 class,也不會擔心彼此是否有 class 依賴關係

為什麼不用 inline-style 寫法

所謂的 inline 寫法就像是 <div style="color:red">內容</div>,而作者也有解釋 utility 與 inline-style 的差異點有三種:

  1. 如果你直接寫 margin-bottom: 0.25rem,當樣式變更時,有寫 100 處時,那你就必須到各個網頁去變更,但如果你用 .mb-1,也就是 margin-bottom 向下推一個單位,今天單位有改時,直接改 Tailwind.config.json 變更 .mb-1 單位就好。
  2. 每個 utility class 都支援 RWD 斷點,例如 md:text-6xl,意思是 md 斷點以上字變大 6xl 的 size
  3. 每個 utility class 都支援偽類,例如 hover:color-blue-500,任何你想像得偽類都有,例如 focus、active 等等,文件表

以上 2、3 點真是讓人心動,而且就算你自己有新增擴充 Tailwind 樣式,也可以很無痛讓他能支援 RWD 與偽類,實在方便到個並軌 XD

影片重點

  1. 00:01 - 導讀 Tailwind
  2. 02:30 - 講解 CSS 語意命名與 utility class 差異
  3. 03:00 - 講解 Tailwind 三大優勢
  4. 08:45 - utiity css 與 inline css 差異介紹

文獻連結

  1. Tailwind Utility-First 介紹

上一篇
【Tailwind CSS 教學 - 3 】別說 utility CSS 肥,壓縮起來連我自己都怕
下一篇
【Tailwind CSS 教學 - 5 】不只加 RWD 斷點,所有 utility CSS 都加上斷點更狂妄
系列文
CSS 優良部份30

1 則留言

0
Lucas Yang
iT邦新手 5 級 ‧ 2020-09-27 23:43:38

@layer 介紹傳送門:【Tailwind CSS 教學 - 10】新增 component 元件方式 (新增於 2020/10/16)


補充一下:

在 Tailwind CSS 裡擴充 class 時,是要套上 @layer

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    @apply ...;
  }
}

簡單來說,上面編譯完後會等同於下面:

@tailwind base;

@tailwind components;
.card {
  @apply ...;
}

@tailwind utilities;

參考:

看更多先前的回應...收起先前的回應...
廖洧杰 iT邦高手 1 級 ‧ 2020-09-28 13:26:38 檢舉

感謝幫忙補充 :D
有沒有想了解的 Tailwind 或其他 CSS 議題?可以幫你穿插在 30 天內 XD

想要了解 Flex 和 Grid
包括純 CSS 和 Tailwind 使用方式
(因為我都只略知一二 XD)

正在同步學習中XD 感覺真的很方便~

感覺如果用Component Base的Framework(React/Angular/Vue)來開發,utility class反而是優點,畢竟我們是Reuse Component程式碼,class是伴隨著Component的^^///

我要留言

立即登入留言