Slide 1

Slide 1 text

錢(前)端好朋友 如何用 tailwindcss 發大財 2022/03 milkmidi

Slide 2

Slide 2 text

milkmidi (奶綠茶) Positive Grid - Staff Frontend Engineer [email protected] 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