[筆記] Tailwind css – Utility-First 功能優先初體驗

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回趁有專案要新開始之際，熟悉一下 Utility-First 的思維模式。
tailwind-css

內容

1. 跟傳統的 CSS 撰寫的方式相比，你不必再去煩惱 Class 的名稱。因為 Tailwind 的世界中任何的 CSS 都是通用的名稱，你僅需要組合。
2. 由於你是在 HTML 中修改你的 CSS，你無需擔心是否會影響其他頁面
3. Tailwind CSS 中，所有的 Utility Class 都預設支援響應式
4. 可以透過 nodemon 來監控檔案變化，進而在沒有安裝 webpack 等打包工具的狀態下，重新 build css。( 仍須手動清除瀏覽器快取 )

程式碼

Repo：https://github.com/andy922200/tailwindcss-3-learning/commit/fc6ac568761ccb629b6370103ed1fe427fd66471

系列文章

  • [筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1
  • [筆記] Tailwind css – 自適應 RWD 的開發 Best Practice
  • [筆記] Tailwind css – 留言按鈕實作
  • [筆記] Tailwind css – 含 RWD 的三欄式卡片製作
  • [筆記] Tailwind css – 偽類變體和 Variants
  • [筆記] Tailwind css – 使用預設樣式和修改它
  • [筆記] Tailwind css – 使用官方定義樣式
  • [筆記] Tailwind css – Utility Class 設定響應式
  • [筆記] Tailwind css – JIT Just-In-Time Mode 模式簡介
  • [筆記] Tailwind css – Dark Mode 深色模式
    • 按讚加入粉絲團

    延伸閱讀