前端好朋友-tailwindcss

tailwindcss examples
1 https://play.tailwindcss.com/aXDVWw3Omd
2 https://play.tailwindcss.com/KtfjJqgrSt
3 https://play.tailwindcss.com/LacuUZPOWG
4 https://play.tailwindcss.com/5mw0bWJoCa
5 https://play.tailwindcss.com/J0q2j7OVVd
6 https://play.tailwindcss.com/ALAds7Qhfq

tailwindcss 課程
https://5xruby.tw/courses/tailwindcss

奶綠茶的粉絲團
https://www.facebook.com/milkmidifans

vite+tailwindcss+typescript+prettier+eslint+stylelint template
https://github.com/milkmidi/e2e-test-html

Transcript

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