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

Tailwindcssを使ってみる

 Tailwindcssを使ってみる

社内勉強会で使った資料です

7e56a691cfb413e0f6e631791f33fe54?s=128

misumi

July 06, 2021
Tweet

Transcript

  1. 5BJMXJOEDTTΛ࢖ͬͯΈΔ

  2. UBJMXJOEDTT

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

  4. Ϙλϯൺֱ ˙#PPUTUSBQ CVUUPODMBTTCUOCUOQSJNBSZ #VUUPO CVUUPO ˙UBJMXJOEDTT CVUUPODMBTTCHCMVFIPWFSCHCMVFUFYUXIJUFQYQZSPVOEFETFMFDUOPOF #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. ؾʹͳͬͨΒ࢖ͬͯΈ·͠ΐ͏