Tailwindcssを使ってみる

Transcript

1. 5BJMXJOEDTTΛ࢖ͬͯΈΔ

2. UBJMXJOEDTT

3. UBJMXJOEDTT ɾ6UJMJUZ
   'JSTUͷ$44ϑϨʔϜϫʔΫ
   ɾQ΍CHCMVFͳͲΛDMBTTʹࢦఆ͍ͯ͘͠
   ɾ#PPUTUSBQͷΑ͏ʹCUO΍DBSEΈ͍ͨͳ
   ɹίϯϙʔωϯτͷDMBTT͸༻ҙ͞Ε͍ͯͳ͍

4. Ϙλϯൺֱ ˙#PPUTUSBQ
   CVUUPO
   DMBTTCUO
   CUOQSJNBSZ
   
   
   #VUUPO
   CVUUPO
   ˙UBJMXJOEDTT
   CVUUPO
   DMBTTCHCMVF
   IPWFSCHCMVF
   UFYUXIJUF
   QY
   QZ
   SPVOEFE
   TFMFDUOPOF
   
   
   #VUUPO
   CVUUPO ҰݟɺDMBTT͕ͨ͘͞Μ͚ͭΒΕ͍ͯͯ#PPUTUSBQͷ΄͏͕εοΩϦͯ͠ݟ͑Δ
   

   Ͱ΋ͳͥྲྀߦͬͯΔͷ͔

5. ϝϦοτᶃ ɾ$44ઃܭͷ࣌ؒΛݮΒͤΔ
   ɾDMBTTΛ౰͍͚ͯͯͩ͘ͰελΠϦϯά͢ΔͷͰ
   ɹDMBTT໊Λߟ͑Δඞཁ͕ͳ͍
   ɾ$44ઃܭʹΑΔ)5.-ͷߏ଄Λؾʹ͢Δඞཁ͕ͳ͍
   ɹʢ)5.-ͱ$44ͷ෼཭ʣ

6. ϝϦοτᶄ ɾ΄ͱΜͲશͯͷ$44ϓϩύςΟʹର͢ΔDMBTT͕
   ɹ༻ҙ͞Ε͍ͯΔͨΊɺ$44Λॻ͘ඞཁ͕ͳ͍
   ɾUBJMXJOEͰ༻ҙ͞Ε͍ͯͳ͍΋ͷ͸DPOpHͰ
   ɹ৽ͨʹࢦఆ΍มߋΛ͢Δ

7. ϝϦοτᶅ ɾ#PPUTUSBQष͞Έ͍ͨͳ΋ͷ͕ͳ͍
   ɾUBJMXJOEDTT͸͋͘·ͰϓϩύςΟʹର͢ΔDMBTT͕
   ɹ༻ҙ͞Ε͍ͯΔ͚ͩͰɺ΄΅$44ͦͷ΋ͷ
   ɾͲΜͳϓϩδΣΫτͰ΋ಋೖ͠΍͍͢

8. ࣮ࡍʹ࢖ͬͯΈΔ

9. ࠓճ͸/FYUKTͰ yarn add tailwindcss@latest postcss@latest autoprefixer@latest ͢Ͱʹ/FYUKTͷ؀ڥߏங͸΍ͬͨલఏͰ ˞HVMQͰ΍Δ৔߹͸1PTU$44ͷϓϥάΠϯͱͯ͠௥Ճ͢Δͱ࢖͑ΔΈ͍ͨͰ͢

10. $POpHϑΝΠϧΛ࡞Δ npx tailwindcss init -p UBJMXJOEDPOpHKTͱQPTUDTTDPOpHKT͕ੜ੒͞ΕΔ

11. $POpHΛमਖ਼ module.exports = { purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. {js,ts,jsx,tsx}"], darkMode: false,

    // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }; 1VSHFͷઃఆΛ͢Δ͜ͱͰɺϏϧυ࣌ʹ࢖༻ͯ͠ͳ͍DMBTT͸আ֎͞ΕΔ

12. HSPCBMTDTTΛ࡞੒ @tailwind base; @tailwind components; @tailwind utilities; 5BJMXJOEDTTͷελΠϧΛΠϯΫϧʔυ͢Δ

13. @BQQUTYͰJNQPSU import { AppProps } from "next/app"; import "tailwindcss/tailwind.css"; import

    "../styles/globals.css"; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp; UBJMXJOEDTTͱDTTΛJNQPSU

14. σϞ

15. νʔτγʔτ

16. 74DPEF֦ுػೳ

17. $PNQPOFOUαϯϓϧू

18. 1MVHJO

19. *DPOT

20. UBJMXJOEDTT ɾ΄΅$44Λॻ͔ͣʹελΠϦϯάͰ͖Δ
    ɾ޷Έ͸͋Δʢ5BJMXJOE
    $44͕ࢲʹ͸߹Θͳ͔ͬͨཧ༝ίϦεʣ
    ɾͰ͖ΔͰ͖ͳ͍͸஌͓ͬͯ͘ʢOUIDIJMEͰ͖ͳͦ͞͏ʣ
    ɾΞοϓσʔτ͕͋ΔͷͰͰ͖Δ͜ͱ͸૿͍͑ͯ͘

21. UBJMXJOEDTTKJU ࡢ೔ൃදͷλΠϜϦʔͳهࣄ

22. UBJMXJOEDTTKJU

23. UBJMXJOEDTTKJU ɾϏϧυ࣌ؒͷߴ଎Խʢdඵ͔͔ͬͯͨͷ͕ϛϦඵఔ౓ʹ
    ɾͦΕʹΑͬͯશͯͷม਺͕σϑΥϧτͰ༗ޮʹ
    ɾࡉ͔͍QYࢦఆɻʢྫɿUPQ<QY>ɺUPQ<QY>ʣ
    ɾQVSHFͷઃఆ͕ෆཁʹͳΔʁ
    ɾ։ൃதͷϏϧυαΠζͷ࡟ݮ

24. ؾʹͳͬͨΒ࢖ͬͯΈ·͠ΐ͏