Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
錢(前)端好朋友 如何用 tailwindcss 發大財 2022/03 milkmidi
Slide 2
Slide 2 text
milkmidi (奶綠茶) Positive Grid - Staff Frontend Engineer milkmidi@gmail.com https://www.facebook.com/milkmidifans
Slide 3
Slide 3 text
今天的 topic 只有一項： 如何發大財
Slide 4
Slide 4 text
學會 React Vue 年薪百萬不是夢 其實還要精通 css, webpack, js, ts, backend, server, docker
Slide 5
Slide 5 text
身為前端，最痛苦的事是什麼 ?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
CSS
Slide 8
Slide 8 text
痛苦 1
Slide 9
Slide 9 text
痛苦2：當要修改文字的 style 時, 你會
Slide 10
Slide 10 text
想辦法找到那個 class，but........
Slide 11
Slide 11 text
絕對禁止 使用 scss parent selector
Slide 12
Slide 12 text
找到了，改完了，然後 ...... 改了之後沒變化，因為其他支 sass 用了 mediaQuery 蓋掉了你的 style
Slide 13
Slide 13 text
WTF
Slide 14
Slide 14 text
絕對禁止 將 mediaQuery 寫在不同的地方
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
導入 tailwindcss
Slide 17
Slide 17 text
tailwindcss
Slide 18
Slide 18 text
vscode extensions
Slide 19
Slide 19 text
vscode extensions 連在 tailwind.config.js 自定的 class 都會有提示，超爽 同事再也不會 Cow 北說，你的 class 叫什麼名字 (限定寫在 tailwind.config.js 才會有)
Slide 20
Slide 20 text
tailwind 寫太長怎麼辦
Slide 21
Slide 21 text
tailwind 好用之 grid system https://play.tailwindcss.com/aXDVWw3Omd
Slide 22
Slide 22 text
tailwind 好用之 peer https://play.tailwindcss.com/KtfjJqgrSt
Slide 23
Slide 23 text
PM 說： 依使用者語系，有不同的字型大小 而且十分鐘後要好
Slide 24
Slide 24 text
https://play.tailwindcss.com/LacuUZPOWG
Slide 25
Slide 25 text
vue scoped / css module
Slide 26
Slide 26 text
情境題：Boolean 值的切換 https://play.tailwindcss.com/5mw0bWJoCa
Slide 27
Slide 27 text
Vue 就只需要 bind data-active
Slide 28
Slide 28 text
舊專案導入，發現蓋不掉 style 那就打同事吧 important 大法吧 https://play.tailwindcss.com/J0q2j7OVVd
Slide 29
Slide 29 text
用 tailwindcss 實作 apple.com 手機版 footer collapse 選單 https://play.tailwindcss.com/ALAds7Qhfq
Slide 30
Slide 30 text
React 的話，css module + tailwindcss
Slide 31
Slide 31 text
不推 styled-component 的原因
Slide 32
Slide 32 text
React 不推 emotion 的原因
Slide 33
Slide 33 text
React 不推 MUI 的原因
Slide 34
Slide 34 text
絕對禁止 cssinjs
Slide 35
Slide 35 text
CSS 能做的，就不要用 JS 習大大沒說過
Slide 36
Slide 36 text
stylelint 再亂排 CSS 順序呀
Slide 37
Slide 37 text
ESLint + prettier ESLint + prettier 可以用來檢查 JS/TS 外 tailwindcss 順序也可以排的漂漂亮亮
Slide 38
Slide 38 text
財富密碼
Slide 39
Slide 39 text
學好 typescript (跟 tailwind 無關，單純只是來湊頁面用)
Slide 40
Slide 40 text
tailwindcss 的缺點： IE 不能動(反正 Vue3 也不支援 IE)
Slide 41
Slide 41 text
總結 導入 tailwind 就對了 搞不定，請洽奶綠
Slide 42
Slide 42 text
當然也是可以把 tailwindcss 寫爛掉 技術本質沒有好或壞
Slide 43
Slide 43 text
工商服務時間
Slide 44
Slide 44 text
奶綠在 7 月份有開 tailwind 課程 https://5xruby.tw/courses/tailwindcss
Slide 45
Slide 45 text
Positive Grid 徵資深前端工程師 我們有 React, 有 tailwind, 有 CI, 有 QA 還有酒、音樂和練團室 而且上班就可以喝(理性飲酒) 沒有 vue
Slide 46
Slide 46 text
學習不需要為公司、長官或同事， 不需要為別人，只為你自己。 五倍紅寶石 高見龍
Slide 47
Slide 47 text
奶綠茶的粉絲團 https://www.facebook.com/milkmidifans vue+ts+eslint+prettier+tailwind+vite template