大家好，我是奶綠茶
分享我在 2022 台灣 vue 社群介紹 tailwindcss
文件連結在這，針對大家的問題我來整理一下。
(技術本質沒有好或壞，以下內文都是個人的心得，沒有絕對的對或錯)
當要修改 style 時，你會
1. 開 devtools, 找到該 class，例如：banner__heading-title
2.進 code 想辦法找到 class 名稱
3. 然後就找不到，WTF ?
4 因為他用了 scss parent selector
.banner {
&__heading {
&-title {
font-size: 20px;
}
}
}5 找到後，改完，發現怎麼都沒有變化。
6 WTF?
7 因為其他隻 sass 用了 mediaQuery 蓋掉你的 style
// anthor.scss
@media(min-width: 768px){
xxxxxxx
}導入 tailwindcss 的話。
<div class="bg-block">
<div class="text-5xl font-bold md:text-3xl">Tailwind</div>
</div>是不是所見即所得，也不需要再一隻新的 css。
Tailwindcss 寫太長怎麼辦
用 `@apply` 來簡化
// css
.my-foo {
@apply text-xl font-bold text-red-500;
}
// html
<div class="my-foo">Tailwindcss></div>CSS 命名
這一直對開發人員來說滿困擾的，就算導入 BEM，有時還是因為多包了一層需要更改。
例如：
user-cart
user-cart__content
user-cart__content-show
這時突然 user-cart 多了一層
就要變成
user-cart__想單字有時因為多了一層，需要同時增加 flex ，就還要為此多寫一隻 css 檔。
如果是使用 tailwindcss 的話就不需要去想命名。
<div class="flex items-center justify-between">
<div class="flex items-center">
<h2 class="text-3xl text-green-500">hi, Tailwind</h2>
</div>如果是使用 React 的話，導入 css module 就可以完美的解決 css 命名
統一團隊的 style 風格
網站都會有個主色，在這我們就取名叫 primary
我們可以進到 tailwind.config.js 新增
module.exports = {
theme: {
extend: {
colors: {
primary: '#0d6efd',
danger: '#dc3545',
warning: '#ffc107',
info: '#0dcaf0',
red: 'red',
},
},
},
}// 文字主色
<div class="text-primary"></div>
// 背景主色
<div class="bg-primary"></div>
// text 是 warning
<div class="text-warning"></div>
是不是很方便，不需要為了一件小事就開一隻 css 來處理
不夠用的功能怎麼辦?
tailwind.config.js 可以很方便的加入你想要的功能。
透過 addVariant 就能夠自定
比如最常遇到的就是 true/false 狀態切換，在這我們就設定為 data-active
addVariant('data-active', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`data-active${separator}${className}`)}[data-active="true"]`;
})
});html 端可以這樣做
<div class="hidden data-active:block" data-active="true"></div>
hidden 是 display none
當 data-active 是 ture 的時候，就變成 block
這時只能說，Cow 北的好用呀
<div class="text-black data-active:text-red-500">active 的話，字就是紅色</div>再來一個情境，有登入才出現某個區塊，
登入後，用 js body 上加入一 logged-in 的 class
addVariant('logged-in', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `body[class*="logged-in"] .${e(`logged-in${separator}${className}`)}`
})
});html 端可以這樣做
<div class="hidden logged-in:block">登入才看的到</div>
完全不需要再另開一個 csstailwindcss 檔案更小
大部份的 utility class 都是共用的，而且自帶 Tree shaking，有用到的 style 才會編譯出來。
不推 Material UI 的原因
我一直堅持 CSS 能做到的，就不要用 JS 的開發原則
過度的使用 JS 去解決 CSS，會讓團隊的 Code 變的很難維謢。
Material UI 的出現，好處是限制大家使用相同的 Component,
就不會出現團隊亂寫 CSS 的問題
在開發後台 dashboard 可以採用。
但遇到需要客製化 layout 時，就變的很麻煩。
明明只是一個 flex 排版，用 MUI 就要去看他的文件，看 Component 屬性。
一個 <div class=”flex”> 就可以決解，卻要用一個 Component 包裝。
另一點是 MUI 的 style 寫法，是用 JS Object 來寫 CSS，明明寫 CSS 就可以決解。
基於這兩點原因，我個人不是很推 Material UI。
不過如果是單純的使用 MUI 提供的 ComboBox 或是其他組件時，我就覺得很 OK。
eslint prettier stylelint
現在是打群架時代，統一團隊的 code style 就變的很重要
eslint 是用來幫你做程式碼的簡單 code review, 針對各項的 rule 設定，可以讓團隊有相同的 code style,
像是不能用 var, 要用 let/const 之類的。
但 eslint 只針對 code review, 像是排版的功能，function 前後要不要有空格之類的，就需要使用 prettier
prettier 是負責 formatter code 的排版用。
兩套功能有重疊到，但還是可以完美的整合，
開啟 vscode autosave format ，存檔就自動 eslint + prettier, 真的超推的。
stylelint 是針對 css 的部份做 code review 和排版，透過設定，可以決解 style 的順序，或是 scss 的巢狀只能寫幾層，相當的好用
tailwindcss 與 prettier
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
tailwindcss 開發上有時會 class 名稱寫很長，但就會遇到順序的問題。
雖然使用上順序沒有差，但如果能統一排序的話就更讚了。
剛好有個套件可以整合 tailwindcss 與 prettir
(注意，目前會遇到 PC 和 Mac 排序的結果不同)
// prettier.config.js 只需要在這加上 tailwindConfig 路徑即可
module.exports = {
tailwindConfig: './tailwind.config.js',
// 略
};lint 的教學和安裝，官網都有寫的很清楚，這邊就不一一說明
如果你在設定上遇到問題，歡迎留言討論
完整的eslint+prettier+stylelint+vite+typescript template
工商服務
如果你對 tailwindcss 想要更加了解的話，可以參考奶綠開設的專班，有更完整的教學說明。
https://5xruby.tw/courses/tailwindcss