iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
2
影片教學

CSS 優良部份系列 第 10

【Tailwind CSS 教學 - 3 】別說 utility CSS 肥,壓縮起來連我自己都怕

一直以來 Utility CSS 被人詬病的事情,就是 CSS 整包很肥大,所以在上個章節才會提及如果要使用 Tailwind 不要使用 CDN,因為肥到你會怕,有多肥?大概 2.x MB 吧 XD

在 Tailwind 上要壓縮檔案也是很簡單的,重點是它會偵測你指定的檔案類型,去偵測到哪些 class 有用到,並將沒用到的移除,整體容量就能夠瘦身不少嘍!

影片重點

  1. 00:01 - 導讀 Getting Started
  2. 02:35 - 手把手帶你壓縮 Tailwind CSS
  3. 10:18 - Tailwind 瀏覽器支援度懶人包
  4. 11:10 - ** Tailwind 插件 - 必裝五顆星 ⭐**

文獻連結

  1. Tailwind 壓縮 CSS 教學
  2. Tailwind 瀏覽器支援度
  3. Tailwind 插件連結

上一篇
【Tailwind CSS 教學 - 2 】Tailwind NPM 環境安裝流程
下一篇
【Tailwind CSS 教學 - 4 】utility first 有機會成為未來 CSS 王者?
系列文
CSS 優良部份30

2 則留言

0
高見龍
iT邦新手 4 級 ‧ 2020-09-25 02:22:37

小朋友哭聲出現了!

廖洧杰 iT邦高手 1 級 ‧ 2020-09-25 09:52:32 檢舉

恭喜抓到本篇重點!我其實是來曬小孩的 XD (血淚笑

高見龍 iT邦新手 4 級 ‧ 2020-09-25 11:34:36 檢舉

曬小孩是一定要的,所以我直接曬 30 集 :)

0
Lucas Yang
iT邦新手 5 級 ‧ 2020-10-16 22:47:02

來補充一些內容:

安裝 IntelliSense 套件故障排除

裝 IntelliSense 套件的雷我也踩過 (踩過就知道痛...),不過後來發現 IntelliSense 套件的頁面也加上了 故障排除 的章節,這裡來完整說明一下:

  1. 確保工作區根目錄下有名稱為 tailwind.config.jstailwind.js 的 Tailwind CSS 配置文件
  2. 確保專案有安裝 tailwindcss 套件 (使用 npm、yarn 或 pnpm 其中之一安裝),意思就是在 package.json 檔裡要有 tailwindcss
  3. 在安裝完 tailwindcss 套件和新增完 tailwind.config.js 後,需要重新開啟 VSCode 視窗 (或者執行 VSCode 的 Developer: Reload Window 命令也可以)

CSS Validation 設定

除了 IntelliSense 套件外,再分享一個 CSS Validation 的設定。在新增了主要的 CSS 檔後,都會增加含有 @tailwind 的語法,VSCode 的 CSS Validator 不認得,便會回傳 Unknown at rule @tailwind 的 Warning 訊息,這時可以使用 stylelint 來修改驗證設定。只要安裝 stylelint 的 VSCode 套件 後,在 .vscode/settings.json (當前工作區的 VSCode 設定) 增加以下設定就可以了:

{
  "css.validate": true,
  "stylelint.config": {
    "rules": {
      "at-rule-no-unknown": [true, {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "layer",
          "variants",
          "responsive",
          "screen"
        ]
      }],
      "declaration-block-trailing-semicolon": null,
      "no-descending-specificity": null
    }
  }
}

我要留言

立即登入留言