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

by LINE Developers

Slide 1

Slide 1 text

Chakra UI Ͱ͸͡ΊΔ Tailwind CSS ΁ͷ͞͞΍͔ͳ఍߅ UIT meetup vol. 11 ϑϩϯτΤϯυߚനLT߹ઓ 2020/12/18 @spring-raining 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ͦͷ͜ͱΛ ఻͑ʹདྷ·ͨ͠ 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Chakra UI Πϯετʔϧ 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ࣗવͳCode IntelliSense 16

Slide 17

Slide 17 text

Colors • Tailwind͸ϏϏοτΊɹChakra͸མͪண͍ͨ৭߹͍ Chakra Tailwind ͲͪΒʹͤΑConﬁgͰมߋՄೳ 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Divider Problem 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Transition/Animation 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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