Chakra UI ではじめる Tailwind CSS へのささやかな抵抗 / Modest resistance to Tailwind CSS starting with Chakra UI

spring_raining (LINE株式会社)
UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です
https://uit.connpass.com/event/197740/

Transcript

1. Chakra UI Ͱ͸͡ΊΔ Tailwind CSS ΁ͷ͞͞΍͔ͳ఍߅ UIT meetup vol. 11 ϑϩϯτΤϯυߚനLT߹ઓ 2020/12/18 @spring-raining 1
2. ͋ͳͨ୭ʁ • HN: ͸Δ͞Ί @spring-raining • LINE ϑϩϯτΤϯυΤϯδχΞ • ࠷ۙ͸SVGͷdଐੑΛோΊΔ࢓ࣄΛ͍ͯ͠·͢ 2
3. ฏ࿨ͳCSS in JSଜʹ ͋Δ೔ࠇધ͕΍͖ͬͯͨ 3
5. 　 　 　 　 　 　 ＿＿＿ 　　　　　　　／　　 　 　＼ 　　　　 　／ノ　　＼　　 u. ＼　！？ 　　　　／ （•） 　（•） 　　　＼　 　　　　|　 　（__人__）　 　　u. 　 | 　 　　 ＼　u.｀ ⌒´　 　　　　／ 　　　　ノ　　　　　　　　　　　＼ 　 ／´　　　　　　　　　　　　 　　ヽ https://nextjs.org/docs/basic-features/built-in-css-support 5
6. 　　　　　　　／　　　 　　＼！？？ 　　　　 　／　　u　　 ノ　　＼ 　　　　／ 　　　　 u （•）　　＼ 　　　　|　 　　　　　　　（__人__）| 　 　　 ＼　　　　u　　　.｀ ⌒／ 　　　　ノ　　　　　　　　　　　＼ 　 ／´　　　　　　　　　　　　 　　ヽ https://zenn.dev/takepepe/scraps/6668e9fe402666 6
7. ΋͋͠ͳ͕ͨ ReactΛ࢖͍ͬͯΔͷͳΒ… 7
8. Tailwind͚ͩͰͳ͘ Chakra UI΋ࢼͯ͠΄͍͠… 8
9. ͦͷ͜ͱΛ ఻͑ʹདྷ·ͨ͠ 9
10. Tailwind CSSͷྑ͞ͱ͸ʁ 10 طଘϓϩδΣΫτ΁ͷಋೖ͠΍͢͞ Utility-first APIͷ༏लͳઃܭ Themeͷॊೈ͞
11. Chakra UI ΛҰݴͰද͢ͱ • Emotion ʹ • Tailwind CSS ͷ௚ײੑͱॊೈੑΛ଍͠߹Θͤͨ • Pure Typescript ͳ Best practice React component ू Ұݴͱ͸ 11
12. Chakra UI Πϯετʔϧ 12
13. ChakraͱEmotion • CSS-in-JSͱͯ͠ͷ࣮૷͸Emotionʹґଘ • ΞχϝʔγϣϯϥΠϒϥϦͱͯ͠Framer MotionΛαϙʔτ (ඞਢͰ͸ͳ͍) த਎͸EmotionͳͷͰcss attributeͳͲ΋࢖͑Δ 13
14. defaultTheme TailwindͰݟ֮͑ͷ͋Δઃఆͨͪ 14
15. Spacing • Tailwindͱಉ͘͡୯Ґͳ͠ͷ਺ࣈͰࢦఆ Tailwind Chakra 15
16. ࣗવͳCode IntelliSense 16
17. Colors • Tailwind͸ϏϏοτΊɹChakra͸མͪண͍ͨ৭߹͍ Chakra Tailwind ͲͪΒʹͤΑConfigͰมߋՄೳ 17
18. Alpha colors • എܠʹґଘ͠ͳ͍UIઃܭʹศར 18
19. Breakpoints • Responsive designΛ࣮ݱ͢Δ ͨΊɺը໘෯ʹԠͯ͡ઃఆΛ ੾Γସ͑Δػߏ • ը໘ͷԣ෯͕ҰఆҎ্ʹͳͬ ͨࡍͷελΠϧΛࢦఆ 19
20. 640px 768px 1024px 1280px 1536px 30em 48em 62em 80em Tailwind Chakra sm md lg xl sm md lg xl 2xl 20
21. ϝσΟΞαΠζผͷελΠϧͷॻ͖෼͚ • Chakra͸Array΍ObjectͰ֤ελΠϧΛࢦఆ Tailwind Chakra sm md lg xl 21
22. Divider Problem 22
23. https://twitter.com/takamosoo/status/1336247381155672066 23
24. Stack • Flexʹࣅ͍ͯΔ͕ɺཁૉؒͷ༨ന΍۠੾Γͷ੍ޚ͕Մೳ • dividerͱͯ͠೚ҙͷcomponentΛઃఆͰ͖Δʂ 24
25. Transition/Animation 25
26. Tailwindͷελϯε • Transition: all, colors, opacity, shadow, transformʹରԠ • Animation: spin, ping, pulse, bounce౳ϕʔγοΫͳ΋ͷΛ༻ҙ 26
27. Chakraͷελϯε • Fade, Slide, Collapse౳ཁૉͷin/outʹؔ͢ΔComponentΛఏڙ • ൃలతͳΞχϝʔγϣϯ͸ܿ͘Emotion΍Framer Motionʹҕৡ 27
28. ·ͱΊ • Chakra UI͸৽͍͠CSS-in-JSϥΠϒϥϦͰ͸ͳ͘ɺEmotionʹ TailwindྲྀͷUtility-firstͳઃܭΛݺͼࠐΉίϯϙʔωϯτू • طʹEmotionΛ࢖͍ͬͯΔͳΒΦʔόʔϔουແ͠Ͱ͙͢࢖͑Δ • ΋͏CSSͰ૪͍ͨ͘ͳ͍ɺCSS-in-JSͰ༨ੜΛա͍ͨ͝͠… 28