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. ؾʹͳͬͨΒ࢖ͬͯΈ·͠ΐ͏