[筆記] Tailwind css 3.0 從零開始 – 架設開發環境 – 1

Posted onAuthorANDY LIEN

章節連結

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

內容

1. Tailwind CSS 的誕生，是為了解決一些 CSS 開發痛點。像是：覆蓋式的 CSS、修改他人已經定義好的 CSS，卻不知如何改起、修改既有的 Sass 框架、Class 的頭痛命名問題
2. Tailwind CSS 在 template 的撰寫上會顯得髒亂許多，但要修改客製化時比起 Bootstrap 模式方便
3. Bootstrap 和 Tailwind 預設的都是 mobile-first。不過 Tailwind 的預設都是從 min-width 開始，沒有 max-width 干擾
4. 在 3.0 版開始，你可以使用 CDN 載入，或是搭配 postcss + tailwindcss 來進行編譯執行
5. 在 3.0 版不支援 IE

程式碼

1. 先透過命令列安裝 tailwindcss, postcss 和 autoprefixer
2. 記得新增一個 input.css，當作 tailwind 所需的引入點
3. 使用 npx tailwindcss 來產生 tailwind.config.js，並在此設定你的 tailwind css 編譯細節

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

系列文章

  • [筆記] Tailwind css – 自適應 RWD 的開發 Best Practice
  • [筆記] 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 深色模式
    • 按讚加入粉絲團

    延伸閱讀