iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
3
影片教學

CSS 優良部份系列 第 13

【Tailwind CSS 教學 - 6】我知道你懂 CSS Reset,但你懂 base 全站樣式設定嗎?

許多網頁設計師,都理解需要使用 CSS Reset,但有一個更重要的觀念,能夠大幅減少 CSS Code,那就是 Base,這個 base 比較早出現的概念是在 SMACSS 的 Base,而在 Tailwind 上自然也將其精神帶進其中。

影片重點

  1. 00:01 - 講解 Base 概念
  2. 02:18 - Tailwind CSS base 設定介紹
  3. 05:00 - 講解 BS4 處理 Reset、Base 細節
  4. 06:20 - 教導如何覆蓋 Tailwind 預設 base 樣式
  5. 08:20 - 如何在 Tailwind.config.json 套用 base 設定
  6. 10:30 - Tailwind Base 的 Prelight 概念

文獻連結

  1. Tailwind - Adding Base Styles

上一篇
【Tailwind CSS 教學 - 5 】不只加 RWD 斷點,所有 utility CSS 都加上斷點更狂妄
下一篇
【Tailwind CSS 教學 - 7】Pseudo-Class Variants 是 CSS 屆的偉大發明
系列文
CSS 優良部份30

1 則留言

0
Lucas Yang
iT邦新手 5 級 ‧ 2020-10-16 23:25:14

自己客製的 CSS reset 的部分寫成 Plugin 可以發布到 NPM
在要用時用 NPM 安裝和加到 Tailwind CSS 的 Config 就可以了

我要留言

立即登入留言