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
   

   View Slide

2. ͋ͳͨ୭ʁ
   • HN: ͸Δ͞Ί @spring-raining
   • LINE ϑϩϯτΤϯυΤϯδχΞ
   • ࠷ۙ͸SVGͷdଐੑΛோΊΔ࢓ࣄΛ͍ͯ͠·͢
   2
   

   View Slide

3. ฏ࿨ͳCSS in JSଜʹ
   ͋Δ೔ࠇધ͕΍͖ͬͯͨ
   3
   

   View Slide

4. View Slide

5. 　 　 　 　 　 　 ＿＿＿
   　　　　　　　／　　 　 　＼
   　　　　 　／ノ　　＼　　 u. ＼　！？
   　　　　／ （●） 　（●） 　　　＼　
   　　　　|　 　（__人__）　 　　u. 　 |
   　 　　 ＼　u.｀ ⌒´　 　　　　／
   　　　　ノ　　　　　　　　　　　＼
   　 ／´　　　　　　　　　　　　 　　ヽ
   https://nextjs.org/docs/basic-features/built-in-css-support 5
   

   View Slide

6. 　　　　　　　／　　　 　　＼！？？
   　　　　 　／　　u　　 ノ　　＼
   　　　　／ 　　　　 u （●）　　＼
   　　　　|　 　　　　　　　（__人__）|
   　 　　 ＼　　　　u　　　.｀ ⌒／
   　　　　ノ　　　　　　　　　　　＼
   　 ／´　　　　　　　　　　　　 　　ヽ
   https://zenn.dev/takepepe/scraps/6668e9fe402666 6
   

   View Slide

7. ΋͋͠ͳ͕ͨ
   ReactΛ࢖͍ͬͯΔͷͳΒ…
   7
   

   View Slide

8. Tailwind͚ͩͰͳ͘
   Chakra UI΋ࢼͯ͠΄͍͠…
   8
   

   View Slide

9. ͦͷ͜ͱΛ
   ఻͑ʹདྷ·ͨ͠
   9
   

   View Slide

10. Tailwind CSSͷྑ͞ͱ͸ʁ
    10
    طଘϓϩδΣΫτ΁ͷಋೖ͠΍͢͞
    Utility-first APIͷ༏लͳઃܭ
    Themeͷॊೈ͞
    

    View Slide

11. Chakra UI ΛҰݴͰද͢ͱ
    • Emotion ʹ
    • Tailwind CSS ͷ௚ײੑͱॊೈੑΛ଍͠߹Θͤͨ
    • Pure Typescript ͳ Best practice React component ू
    Ұݴͱ͸
    11
    

    View Slide

12. Chakra UI Πϯετʔϧ
    12
    

    View Slide

13. ChakraͱEmotion
    • CSS-in-JSͱͯ͠ͷ࣮૷͸Emotionʹґଘ
    • ΞχϝʔγϣϯϥΠϒϥϦͱͯ͠Framer MotionΛαϙʔτ
    (ඞਢͰ͸ͳ͍)
    த਎͸EmotionͳͷͰcss attributeͳͲ΋࢖͑Δ
    13
    

    View Slide

14. defaultTheme
    TailwindͰݟ֮͑ͷ͋Δઃఆͨͪ
    14
    

    View Slide

15. Spacing
    • Tailwindͱಉ͘͡୯Ґͳ͠ͷ਺ࣈͰࢦఆ
    Tailwind
    Chakra
    15
    

    View Slide

16. ࣗવͳCode IntelliSense
    16
    

    View Slide

17. Colors
    • Tailwind͸ϏϏοτΊɹChakra͸མͪண͍ͨ৭߹͍
    Chakra
    Tailwind
    ͲͪΒʹͤΑConfigͰมߋՄೳ
    17
    

    View Slide

18. Alpha colors
    • എܠʹґଘ͠ͳ͍UIઃܭʹศར
    18
    

    View Slide

19. Breakpoints
    • Responsive designΛ࣮ݱ͢Δ
    ͨΊɺը໘෯ʹԠͯ͡ઃఆΛ
    ੾Γସ͑Δػߏ
    • ը໘ͷԣ෯͕ҰఆҎ্ʹͳͬ
    ͨࡍͷελΠϧΛࢦఆ
    19
    

    View Slide

20. 640px 768px 1024px 1280px 1536px
    30em 48em 62em 80em
    Tailwind
    Chakra
    sm md lg xl
    sm md lg xl 2xl
    20
    

    View Slide

21. ϝσΟΞαΠζผͷελΠϧͷॻ͖෼͚
    • Chakra͸Array΍ObjectͰ֤ελΠϧΛࢦఆ
    Tailwind
    Chakra
    sm md lg xl
    21
    

    View Slide

22. Divider Problem
    22
    

    View Slide

23. https://twitter.com/takamosoo/status/1336247381155672066 23
    

    View Slide

24. Stack
    • Flexʹࣅ͍ͯΔ͕ɺཁૉؒͷ༨ന΍۠੾Γͷ੍ޚ͕Մೳ
    • dividerͱͯ͠೚ҙͷcomponentΛઃఆͰ͖Δʂ
    24
    

    View Slide

25. Transition/Animation
    25
    

    View Slide

26. Tailwindͷελϯε
    • Transition: all, colors, opacity, shadow, transformʹରԠ
    • Animation: spin, ping, pulse, bounce౳ϕʔγοΫͳ΋ͷΛ༻ҙ
    26
    

    View Slide

27. Chakraͷελϯε
    • Fade, Slide, Collapse౳ཁૉͷin/outʹؔ͢ΔComponentΛఏڙ
    • ൃలతͳΞχϝʔγϣϯ͸ܿ͘Emotion΍Framer Motionʹҕৡ
    27
    

    View Slide

28. ·ͱΊ
    • Chakra UI͸৽͍͠CSS-in-JSϥΠϒϥϦͰ͸ͳ͘ɺEmotionʹ
    TailwindྲྀͷUtility-firstͳઃܭΛݺͼࠐΉίϯϙʔωϯτू
    • طʹEmotionΛ࢖͍ͬͯΔͳΒΦʔόʔϔουແ͠Ͱ͙͢࢖͑Δ
    • ΋͏CSSͰ૪͍ͨ͘ͳ͍ɺCSS-in-JSͰ༨ੜΛա͍ͨ͝͠…
    28
    

    View Slide