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

[專案下載](https://github.com/hexschool/web-layout-training-gulp/tree/feature/tailwind )

# Tailwind 搭配 Gulp 的使用手冊
## 第一次開啟專案指令

npm install
gulp

* 之後開啟只需要輸入 gulp 即可
* 終端機不要關，儲存檔案時才能持續進行語法編譯

## tailwind.config.js
Tailwind 的設定檔，可以用來新增斷點、格線、顏色、等等各種 CSS 的客製化和套件
> 撰寫方式是 JavaScript 的陣列與物件

### 格線設定
當我們想要利用 Tailwind padding 去做出格線系統時：

<div class="container mx-auto px-3">
  <div class="flex flex-wrap -mx-3">
    <div class="w-1/2 px-3"></div>
    <div class="w-1/2 px-3"></div>
  </div>
</div>

不過 Tailwind 文件中有提供 container [預設置中與水平 padding](https://tailwindcss.com/docs/container#centering-by-default) 的作法，我們就可以透過在 tailwind.config.js 設定 container 來省去每次撰寫的 `mx-auto` 和 `px-3`。

依照我們的設計稿左右 padding 的數字去修改的話，會是以下範例：
> 在 theme 物件中新增 container 的設定

module.exports = {
  content: ["./app/**/*.{html,ejs}"],
  theme: {
    container: {
      center: true, 
      padding: "12px"
    },
  },
}

所以當我們在 HTML 中使用 .container 時就會變成以下範例，container 可以做到置中和左右 padding 留 12px 囉！

<div class="container">
  <div class="flex flex-wrap -mx-3">
    <div class="w-1/2 px-3"></div>
    <div class="w-1/2 px-3"></div>
  </div>
</div>

### 主色設定
設計師提供的設計稿都會有不同的主題色，當色碼與 Tailwind 預設提供的都不符合時，我們可以透過 tailwind.config.js 自己設定顏色，Tailwind 文件中提供[自定義顏色](https://tailwindcss.com/docs/customizing-colors#color-object-syntax)的作法。

以第四週設計稿舉例，設計師提供了紅色的三個變體：

<div style="display:flex;">
<img src="https://i.imgur.com/BN7tqs4.png">
<img src="https://i.imgur.com/VXv9k5A.png">
</div>

我們可以設定 colors 物件來新增顏色，我使用了 maroon 當作紅色的名字
> 1. extend 物件代表要在 Tailwind 額外新增新的顏色，若沒使用 extend 會直接將 Tailwind 原本的顏色都覆蓋過去
> 2. light 代表紅色的淺色、DEFAULT 代表紅色、dark 代表深紅色

extend: {
  colors: {
    'maroon': {
      'light': '#FBF2F2',
      DEFAULT: '#AA0601',
      'dark': '#650300'
    }
  },
},

所以當我們在 HTML 中使用時就會變成以下範例
文字顏色：

  <p class="text-maroon">文字 - 紅色</p>
  <p class="text-maroon-light">文字 - 紅淺色</p>
  <p class="text-maroon-dark">文字 - 紅深色</p>

背景色：

  <p class="bg-maroon">背景 - 紅色</p>
  <p class="bg-maroon-light">背景 - 紅淺色</p>
  <p class="bg-maroon-dark">背景 - 紅深色</p>

## 字體設定

[官網文件說明連結](https://tailwindcss.com/docs/font-family#customizing-the-default-font)

以第四週設計稿為例，中文使用 Noto Sans TC ，英文使用 Roboto，因為是外部的字體，所以我們可以到 Google Fonts 先進行下載。

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Roboto:ital,wght@0,400;0,700;1,900&display=swap" rel="stylesheet">

接著在 css 檔案中設定字體，字體是通用設定，所以可以利用 @layer base 來寫：

@layer base {
 html {
  font-family: 'Roboto', 'Noto Sans TC' , system-ui, sans-serif;
  }
}

存檔回到畫面上就可以看到中英文的字體改變囉！