[筆記] Tailwind css – 使用預設樣式和修改它

Posted onAuthorANDY LIEN

章節連結

從 Tailwind CSS 問世以來，也經歷過了數年發展來到第 3 代。這回筆記下 tailwind css 的預設樣式和設定方法。
tailwind-css

內容

1. Tailwind CSS 所提供的基本樣式，稱為 Preflight。基本上是採用 modern-normalize ( 不支援舊版 IE11 以下瀏覽器 )
2. 樣式的預設採用 box-sizing: border-box
3. 若要改寫樣式的話，需要在引入 tailwind css 的 style.css 中修改，或是在 tailwind.config.js 做調整
4. 可從 tailwindcss/plugin 中引入 plugin() 方法

程式碼

https://github.com/andy922200/tailwindcss-3-learning/commit/2fc62c6940bcdf969bc5cc79df9ca096cdda8337

系列文章

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

    延伸閱讀