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

# 客製化 Tailwind CSS，擁有專屬主題樣式
1. 錄影
2. 客製化
3. 介紹[第二週上課練習作品](https://codepen.io/AliceChiang/pen/poLvybz?editors=1010) （僅供參考樣式）

## Tailwind CLI
- 為何不使用 CDN？
- CDN 若有問題，會連帶影響專案
- CDN 只是用來給開發階段使用，並不適合用來作為正式專案運行的方式
- Tailwind CLI 的核心在於使用 PostCSS 做編譯
- 後處理器(幫 CSS 做加工)
- CSS → super CSS
- Tailwind CLI 會基於 PostCSS 對專案的指定檔案進行掃描，分析出使用了哪些 utilities，然後編譯出相應的 CSS 樣式

## Tailwind CLI 專案開啟步驟
[官網安裝步驟](https://tailwindcss.com/docs/installation)
1. 下載 node （可參考影片 [Gulp 環境安裝（上）](https://courses.hexschool.com/courses/20201122/lectures/40549184) 的步驟一）
2. 桌面新增一個空的資料夾 「tailwind-demo」
3. 在資料夾目錄底下安裝 tailwind

    npm install -D tailwindcss

4. 新增 tailwind.config.js

    npx tailwindcss init

6. 新增 CSS 檔案

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

8. 編譯 CSS 檔案

    npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

`input {CSS檔} output {輸出的CSS檔} 監控編譯`

8. 建立 index.html，使用 Tailwind class
9. 運行 Live Server 查看結果

> 可在 VSCode 安裝 Tailwind 套件「Tailwind CSS IntelliSense」

## Tailwind CLI 專案介紹

專案結構

  tailwind-demo/
  │
  ├─── dist/
  │   │
  │   └─── output.css
  │
  ├─── node_modules/
  │
  ├─── src/
  │   │
  │   ├─── index.html        
  │   └─── input.css  
  │
  ├─── tailwind.config.js    
  └─── package-lock.json       

- src 資料夾是主要我們會更動的部分，(html 和 css)
- dist 資料夾是編譯後產出的檔案
- node_modules 是負責用來存放經由 npm 安裝過後的套件
- tailwind.config.js 是 整專案的 Tailwind 配置設定
- package-lock.json 使用 json 撰寫的描述文件

## 客製化
- tailwind.config.js

  module.exports = {
    content: ['./src/**/*.{html,js}'],
    theme: {
      extend: {},
    },
    plugins: [],
  }

- input.css

  @tailwind base; /* Preflight will be injected here */
  @tailwind components;
  @tailwind utilities;
  
  @layer base {
    /*擴充專案的全站樣式*/
  }

  @layer components {
    /*自組元件*/
  }

  @layer utilities{
    /*自組樣式*/
  }

## Live Demo 主題作品
練習主題：使用 Tailwind CLI 製作表單元件與客製化樣式

步驟說明：
1. 運行 Tailwind CLI
2. tailwind.config.js 載入 [form 套件](https://github.com/tailwindlabs/tailwindcss-forms)
3. 回到 index.html ，依照套件內容撰寫畫面
4. 調整樣式

## 週末任務說明
客製化按鈕元件與顏色：https://hackmd.io/HkBkCPr6QwSrDwCuVW0l9w?view

## 重點複習
- 重點複習
- 預告下週內容
- 表單！
https://docs.google.com/forms/d/e/1FAIpQLSftKG-_gUSeHZ77i6jsIEWLYooFYmJBYNmhhZ-kV5PFPGdHEA/viewform