---
# System prepended metadata

title: 客製化 Tailwind CSS，擁有專屬主題樣式
tags: [網頁切版直播班 - 2022 夏季班]

---

---
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檔} 監控編譯`
  ![](https://i.imgur.com/Iii77VP.png)

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 
  ```javascript
  module.exports = {
    content: ['./src/**/*.{html,js}'],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  ```
- input.css
  ```css
  @tailwind base; /* Preflight will be injected here */
  @tailwind components;
  @tailwind utilities;
  
  @layer base {
    /*擴充專案的全站樣式*/
  }

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

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


## Live Demo 主題作品
練習主題：使用 Tailwind CLI 製作表單元件與客製化樣式
![](https://i.imgur.com/U17G6Ku.png)

步驟說明：
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


