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

# 初見 Tailwind CSS，窺探不同 CSS 用法
1. 錄影
2. 自我介紹
3. 為何會開設 Tailwind 班？適合學習的人？
4. 介紹主線 4,6,8 週、週末任務
5. [第一週上課練習作品](https://codepen.io/AliceChiang/pen/JjLPpwa?editors=1100)

## 各週學習主題與作業

* 第一週：認識 Tailwind
* 上課作品
* 週末任務
* 第二週：Tailwind 客製化
* 上課作品
* 週末任務
* 第三週：Tailwind 響應式
* 上課作品
* 週末任務
* 第四週：Tailwind 和 Gulp 整合，做出眼鏡形象官網
* 上課作品
* 週末任務
* 同學繳交 手刻作業 or **Tailwind 作業**

## Tailwind 簡介
- [官網](https://tailwindcss.com/)
- 是一個 [CSS 框架](https://2021.stateofcss.com/zh-Hant/technologies/css-frameworks/)
- 特色是採用 Utility-First (功能優先)

## Tailwind 核心功能
- [Utility-First Fundamentals](https://tailwindcss.com/docs/utility-first)
- 解決 Class 命名的困擾
- CSS 檔案大小不會一直增長
- 更改時更安全
- [Handling Hover, Focus, and Other States](https://tailwindcss.com/docs/hover-focus-and-other-states)
- hover:xxx
- focus:xxx
- disabled:xxx
- [Responsive Design](https://tailwindcss.com/docs/responsive-design)
- sm:xxx, md:xxx, lg:xxx, xl:xxx, 2xl:xxx

## Tailwind 官網查詢功能
- 找有關 `font-size` 的 CSS 為例，在搜尋的地方輸入 font-size 就可以找到 Typography 頁面，可直接使用 text-xs 等等的樣式
- 題目
1. 文字題目：大小文字為 36px，加上藍色(500)
2. 圖片題目：圖片變形了，要用到 object-fit:cover
3. spacing 題目：區塊內間距左右 8px, 區塊向下的間距 40px
4. state 題目：button hover 時加上綠色背景色(500), button focus 加上border 線條(1px, 藍色(500))
5. flex 題目：三塊 div 並排

## 中場休息

## Live Demo 主題作品
練習主題：手刻自己命名 Class vs. 使用 Tailwind utility class

## Tailwind 常見問題

* 什麼情況適合使用 CSS 框架？

* Tailwind vs. Bootstrap

| | Tailwind | Bootstrap |
| ---------- | ------------------- | ------------------------------ |
| 類型 | Utility 為主 | Component 為主 |
| CSS 處理器 | PostCSS | SCSS |
| 內建元件 | 部分需付費解鎖 | 本身以元件為主，有很多可以使用 |
| 優點 | 1.可快速建構 2.自由度高 3. 不需額外撰寫 CSS，保持 CSS 輕量 4. 有完整的 states, rwd 等等 utility class 可以使用 | 1.可快速建構 2. 完善的格線系統 3.支援無障礙 |
| 缺點 | 不支援 IE | 較不容易大幅改動元件樣式

## 週末任務說明
製作 Button 按鈕：https://hackmd.io/RbYeu-w0SviZQtYVlqP8Rg?view

## 重點複習
- Utility-First
- 下週預告
- 主題是客製化
- 會開始使用 Tailwind CLI，請先準備好 node 環境
- 表單！
https://docs.google.com/forms/d/e/1FAIpQLSdAOG3vPobFnRvU4XFU70mCbCaZNebn4HuPgqcFMt_cFWJ9zQ/viewform