---
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 去做出格線系統時：
```htmlembedded=
<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 的設定
```javascript
module.exports = {
content: ["./app/**/*.{html,ejs}"],
theme: {
container: {
center: true,
padding: "12px"
},
},
}
```
所以當我們在 HTML 中使用 .container 時就會變成以下範例，container 可以做到置中和左右 padding 留 12px 囉！
```htmlembedded
<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 代表深紅色
```javascript
extend: {
colors: {
'maroon': {
'light': '#FBF2F2',
DEFAULT: '#AA0601',
'dark': '#650300'
}
},
},
```
所以當我們在 HTML 中使用時就會變成以下範例
文字顏色：
```htmlembedded
<p class="text-maroon">文字 - 紅色</p>
<p class="text-maroon-light">文字 - 紅淺色</p>
<p class="text-maroon-dark">文字 - 紅深色</p>
```
背景色：
```htmlembedded
<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 先進行下載。
```css
<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 來寫：
```css
@layer base {
html {
font-family: 'Roboto', 'Noto Sans TC' , system-ui, sans-serif;
}
}
```
存檔回到畫面上就可以看到中英文的字體改變囉！
Sign in with Wallet
Connect another wallet