# 【講座】4/21-22 Vue x Tailwind
## Day 1
官網：https://tailwindcss.com
### Tailwind and Bootstrap diff
Tailwind
- Utility first
#### init
```bash
npm install -D tailwindcss
npx tailwindcdd init
```
- tailwind.config.js
```javascript=1
module.exports = {
content: [
/* Tailwind 提取包含 class 的路徑 */
'./index.html'
],
theme: {
extend: {
/* 擴充設定 */
},
/* 覆蓋設定 */
},
plugins: [
/* Tailwind套件 */
],
}
```
- tailwind.css
```css=1
@tailwind base;
@tailwind components;
@tailwind utilities;
```
`npx tailwindcss --input tailwind.css --output output.css --watch`
--watch 隨時監聽 class 變化
- index.html
```
<link rel="stylesheet" href="output.css">
...
<body>
<h1 class="text-4xl">Hi~</h1>
</body>
```
### vscode module
### 長寬邊框設定
### Customizing colors
https://tailwindcss.com/docs/customizing-colors
### 文字設定
### Tailwind.config
```javascript=1
module.exports = {
content: [
/* Tailwind 提取包含 class 的路徑 */
'./index.html'
],
theme: {
extend: {
/* 擴充設定:寫在這邊，可以追加設定 */
colors: {
mycolor: '#000',
}
},
/* 覆蓋設定:寫在這邊，只會有你寫的設定，其餘內建將被覆蓋 */
colors: {
mycolor: '#000',
}
},
plugins: [
/* Tailwind套件 */
],
}
```
### 任意值
在 [ ] 內輸入想要的值，可以幫你轉
### 虛擬類別
[更多虛擬類別](https://tailwindcss.com/docs/hover-focus-and-other-states)
> 斷點盡可能放在Class最後面
> 虛擬類別盡可能放在原類別後面
### 組件
寫在 tailwind.css中
```javascript=
@layer components{
.btn{
@apply px-12 py-4 rounded-full text-lg focus:ring-blue-500;
}
.btn-primary{
@apply bg-blue-200 text-white;
@apply font-bold hover:bg-blue-500;
}
}
```
多行的 apply
### Position
### Grid
### 查看瀏覽器支不支援
[Can I Use](https://caniuse.com/)
### 其他支援
[tailwindui](https://tailwindui.com/)
[Heroicon](https://heroicons.com/)
[awesome-tailwindcss](https://github.com/aniftyco/awesome-tailwindcss)
[tailwindcssplay](https://play.tailwindcss.com/)
## Day 2
### Vue.js
- 漸進式的JavaScript框架
- 資料導向
- 使用標準HTML、CSS，容易上手
- 性能出色
- 相關套件豐富
## 使用Vue CLI 建立Vue專案
1. ```npm install -g @vue/cli```
2. ```vue create "專案名"```
## 基礎Vue.js
- ```v-on``` 綁定點擊事件
- ```v-for``` 綁定for迴圈
- ```v-if``` 內容全刪掉
- ```v-show``` 單純CSS切換隱藏
# 學員心得
- [JoeLin](https://docs.google.com/document/d/1b41eifYiqVFfVjGsxOj3W5v_Wl97Ysxi5LrXQYvzZVQ/edit?usp=sharing)
- [Leon](https://hackmd.io/iizF52gJQNmjx5qe_dyD4w?both)
- [BoHan](https://hackmd.io/@gvviUiwoQPWdHWgXwrzryA/rkxDVq0V5)
- [Mindy](https://hackmd.io/WfEcgHN3RhydkfXirrAQww?view)
- [Gary](https://hackmd.io/u2o6VJwqSreIM3MqZFKZgg)
- [Corbin](https://hackmd.io/@H_KvYSQrQ0GPfbfWJ3fX3g/S1RdEdAVq)
- [Willy](https://docs.google.com/document/d/1dlwnjcTuLRSgOONFnKDQdFkTDSP7uZgJiNqjL5HUPZE/edit?usp=sharing)
- [Amanda](https://hackmd.io/Swuh43DHQ_i6HNHVdGVJzg?view)
- [RJ](https://hackmd.io/@rj1110634028/Sk4k80yr9)
- [Jane](https://hackmd.io/@zp4qplYaS2u_L6I1kjjdOg/Hy05vEeBq)
-
{"metaMigratedAt":"2023-06-16T23:32:54.697Z","metaMigratedFrom":"Content","title":"【講座】4/21-22 Vue x Tailwind","breaks":true,"contributors":"[{\"id\":\"c0088264-87b6-426b-b9f0-699d85f07370\",\"add\":764,\"del\":1},{\"id\":\"ce9e2aa6-561a-4b6b-bf2f-a2359238dd3a\",\"add\":286,\"del\":1},{\"id\":\"18189b73-36e6-4437-ac13-f797deedc9b6\",\"add\":204,\"del\":0},{\"id\":\"fc5e7075-ed79-431d-bb1c-bee060fb4e31\",\"add\":1148,\"del\":30},{\"id\":\"eaccc690-d28b-4eca-ad93-56ed23583c27\",\"add\":662,\"del\":1},{\"id\":\"ed363749-b79c-4c22-8d01-a1ee77a2a1fc\",\"add\":215,\"del\":2}]"}