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

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回趁有專案要新開始之際，熟悉一下 Utility-First 的思維模式。
[筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1

內容

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 深色模式

    • 按讚加入粉絲團

    延伸閱讀