---
tags: 網頁切版直播班 - 2022 夏季班
---

# 輕鬆打造 Tailwind CSS 作品
1. 錄影
5. 介紹[第四週上課練習作品](https://codepen.io/AliceChiang/pen/abYmqaR?editors=1010)（僅供參考樣式）
6. 提醒：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](https://tailwindcss.com/docs/font-family)
- 預設提供三種字體樣式：font-sans（無襯線）、font-serif（襯線）、font-mono
- 使用外部字體，例如：[Google Fonts](https://fonts.google.com/) (可選擇使用 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
[專案下載連結](https://github.com/hexschool/web-layout-training-gulp/tree/feature/tailwind)
[使用手冊連結](https://hackmd.io/UFgAadfSTf6L0sqXJvCV8g)

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

    npm i
    gulp

3. 客製化項目
- color（第二週）
- container（第三週）
- font-family (第四週)

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

桌機：


平板：
<img src="https://i.imgur.com/cbgfd9O.png" width="250">

手機：
<img src="https://i.imgur.com/OZa2nHf.png" width="250">

## 四週回顧
第一週
- 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