Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

December 18, 2020
Tweet

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

  4. 4

  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