---
# System prepended metadata

title: 7/20(三) 週任務
tags: [網頁切版直播班 - 2022 夏季班]

---

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


# 7/20(三) 週任務
## 客製化 Button 按鈕元件

承第一週按鈕的任務，練習使用 Tailwind CSS @layer components 與 @apply 來製作按鈕元件，並自行選擇一個客製化主色來取代原先 blue 的顏色

![](https://i.imgur.com/YUzLMDa.png)


---
Tailwind CSS CDN
```javascript
<script src="https://cdn.tailwindcss.com"></script>
```

補充說明：
* Tailwind CSS v3 版本可以在使用 CDN 的情形下使用 config 做樣式的擴充，請參考官網的使用方法：https://tailwindcss.com/docs/installation/play-cdn
* 客製化顏色可參考官網的使用方法：https://tailwindcss.com/docs/customizing-colors#color-object-syntax
* **@apply 的使用要注意**：官方網站上說使用 @apply 的原因不要只是為了想讓 class 變短，且若大量使用 @apply 的話基本上已經違背了 Tailwind 的初衷。
在這個例子會使用是因為
    1. button 的 class 設定冗長且複雜(主要是因為包含各式狀態)
    2. 每個 btn 的 class 用法都差不多，並且只有微小差距，例如顏色的不同
    3. 複用機會非常高

    通常 @apply 的使用機會大部分是在自己做的表單元素和按鈕。這部分的說明可參考 [Tailwind 作者的說法](https://www.youtube.com/watch?v=krSgBUmIgP0&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=5&t=309s)。
    所以若同學有想使用 @apply 時不妨可以參考一下是否有和 button 或是 form 類似的情況再使用喔！
    

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：[Codepen 連結](https://codepen.io/AliceChiang/pen/BaJbRbW?editors=1010) -->


回報區
---


|    Discord     |                         CodePen                          |
|:--------------:|:--------------------------------------------------------:|
|  黃士桓#7654   | [codePen](https://codepen.io/shr-huan-huang/pen/bGvWeZw) |
|  Chaoci#2460   |   [codepen](https://codepen.io/gmailchao/pen/eYMWeZg)    |
| christina#6185 |   [Codepen](https://codepen.io/chrisc0210/pen/JjLNMXz)   |
|   威爾#1694    |    [CodePen](https://codepen.io/WILL_Wu/pen/oNqWdoN)     |
|   Chi#7605    |   [Codepen](https://codepen.io/YoChi84/pen/jOzmdoN)      |
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/rNdmPWB?editors=1010)|
|群嘉#3943|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/NWYgGqZ?editors=1011)|
|LinaChen#1796|[CodePen](https://codepen.io/LinaChen/pen/JjLJYzB)|
|雷雷#7844|[CodePen](https://codepen.io/lei-yi-jie/pen/KKoqzeL?editors=1010)|
|How#5806|[CodePen](https://codepen.io/howtobefine/pen/GRxErEz)|
|bakiii#2652|[codepen](https://codepen.io/aki168/pen/MWVooYw)|
|Clara#1275|[CodePen](https://codepen.io/bsupixqu/pen/xxWrbJo?editors=1010)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/KKoqQeE?editors=1010)|
|yuyu#6310|[Codepen](https://codepen.io/yuyu0905/pen/WNzOJjp?editors=1000)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/PoRjLdv)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/abYwryz)|
| Rita916#4384 |[Codepen](https://codepen.io/rita0916/pen/XWEgwLm)|
| Peng#9811  |[Codepen](https://codepen.io/peng-027/pen/NWYvroP)|
| annanna#6011  |[Codepen](https://codepen.io/annaprosty/pen/QWmMEoj)|
| 布魯諾#7239  |[Codepen](https://codepen.io/bruno-yu/pen/zYWdqZV?editors=1010)|
| 𝓛𝓊𝒸𝓎#8635  |[Codepen](https://codepen.io/lucygirl/pen/yLKoopz)|
| Ringo #7583  |[Codepen](https://codepen.io/ringolai1988/pen/ZExXERQ?editors=1010)|
|家洋 #6999 | [CodePen](https://codepen.io/aa235553756/pen/PoRKrZe)|
|大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/GRxMJvN)|
|Roceil#5501 | [CodePen](https://codepen.io/Roceil/pen/MWVEvyb)|
|Fang #4680|[Codepen](https://codepen.io/std95174/pen/qBoPMYy?editors=1010)|
|瑞追 #8227|[CodePen](https://codepen.io/owlu0905/pen/abYLRYr)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/GRxOBom)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/zYWpYJx?editors=1010)|
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/GRxyJPZ)|
|EmilyLin#0526|[CodePen](https://codepen.io/c199615/pen/oNqpZyq?editors=1010)|
|Cliff#4606|[CodePen](https://codepen.io/Cliff_hex/pen/RwMMJaJ?editors=1011)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/JjLvvaY)
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/BarqZJG?editors=1010)|
| 肉桂卷#0625|[CodePen](https://codepen.io/ginnlee/pen/OJvdENY?editors=1010)|