輕鬆打造 Tailwind CSS 作品

1. 錄影
2. 介紹第四週上課練習作品（僅供參考樣式）
3. 提醒：4,6,8 週可以使用 Tailwind 交作業

RWD 格線與間距

容器排版：

• 容器寬度用 % 為單位
  例：兩個容器並排，一個容器就會佔 50% 的寬度

<div class="flex flex-wrap">
  <div class="w-1/2"></div>
  <div class="w-1/2"></div>
</div>

製作間距：

1. 加上左右 padding 做出間距 (gutter)
   

   
   

2. 再透過外層負值 margin 補回
   

程式碼：

<div class="flex flex-wrap -mx-3">
  <div class="w-1/2 px-3"></div>
  <div class="w-1/2 px-3"></div>
</div>

小練習：每日任務使用 Tailwind 改寫
https://codepen.io/AliceChiang/pen/WNzGMjx?editors=1010

字體用法

font-family

• 預設提供三種字體樣式：font-sans（無襯線）、font-serif（襯線）、font-mono
• 使用外部字體，例如：Google Fonts (可選擇使用 extend 或直接新增)
  • 覆蓋原本 font-sans 的外部字體
  ​​theme: {
  ​  fontFamily: {
  ​  	'sans': ['"Fredoka One"', 'cursive'],
  ​  }
  ​​}
  

  • 使用自定義名稱的外部字體
  ​​theme: {
  ​  fontFamily: {
  ​    'display': ['"Fredoka One"', 'cursive'],
  ​  }
  ​​}
  

  • 使用 extend 擴充自定義名稱的外部字體
  ​​theme: {
  ​  extend: {
  ​    fontFamily: {
  ​  	'display': ['"Fredoka One"', 'cursive'],
  ​    }
  ​​  }
  ​​}
  

  • 在載入外部字體後方依序放入 font-sans 字體
  ​​const defaultTheme = require('tailwindcss/defaultTheme')
  
  ​​theme: {
  ​​  extend: {
  ​    fontFamily: {
  ​  	'display': ['"Fredoka One"', 'cursive', ...defaultTheme.fontFamily.sans]
  ​​    }
  ​​  }
  ​​}
  

• 全域設定
  ​​@layer base {
  ​​  html {
  ​​    font-family: 'Fredoka One', 'cursive', system-ui, sans-serif;
  ​​  }
  ​​}
  

中場休息

中場休息～～～～～～

Gulp 搭配使用 Tailwind

專案下載連結
使用手冊連結

1. Code >Download ZIP
   

2. 運行專案(需要先有 Node 環境)
   將專案解壓縮後丟至 VS Code 開啟
   開啟專案內的終端機，輸入以下指令

   ​​​​npm i
   ​​​​gulp
   

3. 客製化項目

• color（第二週）
• container（第三週）
• font-family (第四週)

Live Demo 主題作品

練習主題：Tailwind 響應式，以第三週設計稿的區塊為例

桌機：

平板：

手機：

四週回顧

第一週

• Tailwind 核心概念
• 其中 Utility-First 三個優點
• 做了兩個很像的卡片，手刻 vs. 使用 CDN 引入 Tailwind 寫法

第二週

• Tailwind CLI
• 客製化（@layer base/components/utilities 新增不同功用的 CSS、tailwind.config.js 針對既有樣式做擴充或覆蓋）
• 引入 Tailwind 的表單套件，做出客製化表單

第三週

• Tailwind 斷點設計
• Mobile First 和 min-width
• 延續第二週的客製化，應用在 container 和 斷點上
• 做出第三週設計稿的 Navbar（沒有用到格線）

第四週

• 介紹格線寫法、字體載入
• Gulp 專案和 Tailwind 的整合應用
• 介紹其他樣式

週末任務說明

Dark Mode：https://hackmd.io/RbHAa2lkS5KFrUWBHGyvTQ?view

重點複習

• 重點複習
• Tailwind 的 UI Components(非官方)
  • Tailwindcomponents: https://tailwindcomponents.com/
  • Tailwind Elements: https://tailwind-elements.com/
  • HyperUI: https://www.hyperui.dev/
• 下一步
  • 使用 Tailwind 嘗試製作不同樣式：https://tailwindui.com/
  • Tailwind 作者的影片講解：https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR
  • 進階：嘗試與 JS 框架一起使用
• 表單！
  https://docs.google.com/forms/d/e/1FAIpQLSdA_dFckQt4xPyl-6LWut2Cpd9r2MonAwUXiDBDBoFIC8uJfw/viewform