[筆記] Tailwind css – Utility Class 設定響應式

Posted onAuthorANDY LIEN

章節連結

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

內容

1. 若用 scss 的寫法，雖說可以用 @mixin 搭配 @include ，但尺寸的越發多樣化，寬度細節越來越多
2. Bootstrap 雖說定義好了元件，來 class 名稱之間的耦合很重，閱讀性偏差
3. Tailwind CSS 是單一斷點，也無須解決相依性問題。偽類也可以輕鬆達成響應式
4. Tailwind CSS 的 button 預設是沒有樣式的

程式碼

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

系列文章

  • [筆記] 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-First 功能優先初體驗
  • [筆記] Tailwind css – JIT Just-In-Time Mode 模式簡介
  • [筆記] Tailwind css – Dark Mode 深色模式
    • 按讚加入粉絲團

    延伸閱讀