輕鬆打造 Tailwind CSS 作品
- 錄影
- 介紹第四週上課練習作品(僅供參考樣式)
- 提醒:4,6,8 週可以使用 Tailwind 交作業
RWD 格線與間距
容器排版:
- 容器寬度用 % 為單位
例:兩個容器並排,一個容器就會佔 50% 的寬度
製作間距:
-
加上左右 padding 做出間距 (gutter)
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
再透過外層負值 margin 補回
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
程式碼:
小練習:每日任務使用 Tailwind 改寫
https://codepen.io/AliceChiang/pen/WNzGMjx?editors=1010
字體用法
font-family
- 預設提供三種字體樣式:font-sans(無襯線)、font-serif(襯線)、font-mono
- 使用外部字體,例如:Google Fonts (可選擇使用 extend 或直接新增)
- 在載入外部字體後方依序放入 font-sans 字體
- 全域設定
中場休息
中場休息~~~~~~
Gulp 搭配使用 Tailwind
專案下載連結
使用手冊連結
-
Code >Download ZIP
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
運行專案(需要先有 Node 環境)
將專案解壓縮後丟至 VS Code 開啟
開啟專案內的終端機,輸入以下指令
-
客製化項目
- color(第二週)
- container(第三週)
- font-family (第四週)
Live Demo 主題作品
練習主題:Tailwind 響應式,以第三週設計稿的區塊為例
桌機:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
平板:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
手機:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
四週回顧
第一週
- 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
重點複習