Try   HackMD

輕鬆打造 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)

    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 →

  2. 再透過外層負值 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 →

程式碼:

<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

    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 →

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

    ​​​​npm i
    ​​​​gulp
    
  3. 客製化項目

  • 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

重點複習