[筆記] Tailwind css – 自適應 RWD 的開發 Best Practice

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下響應式在撰寫時的 Best Practice。
[筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1

內容

1. 僅需要思考寬度「由小到大」這一個方向的變化即可
2. 格式為：<斷點代號>:<樣式名稱>，如 sm:mx-0
3. 數字比例基本值為 4。因此 mx-2 代表水平 margin 8px
4. tailwind 預設最小斷點是 sm, 640px 以上。換言之，概念上要換成先撰寫手機版，然後寬度抵達 640px 以上時，進行樣式改變

程式碼

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

系列文章

  • [筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1
  • [筆記] Tailwind css – 留言按鈕實作
  • [筆記] Tailwind css – 含 RWD 的三欄式卡片製作
  • [筆記] Tailwind css – 偽類變體和 Variants
  • [筆記] Tailwind css – 使用預設樣式和修改它
  • [筆記] Tailwind css – 使用官方定義樣式
  • [筆記] Tailwind css – Utility-First 功能優先初體驗
  • [筆記] Tailwind css – Utility Class 設定響應式
  • [筆記] Tailwind css – JIT Just-In-Time Mode 模式簡介
  • [筆記] Tailwind css – Dark Mode 深色模式

    • 按讚加入粉絲團

    延伸閱讀