Tweet
Tweet

Slide 1

Slide 1 text

5BJMXJOEDTTΛ࢖ͬͯΈΔ

Slide 2

Slide 2 text

UBJMXJOEDTT

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Ϙλϯൺֱ ˙#PPUTUSBQ CVUUPODMBTTCUOCUOQSJNBSZ #VUUPO CVUUPO ˙UBJMXJOEDTT CVUUPODMBTTCHCMVFIPWFSCHCMVFUFYUXIJUFQYQZSPVOEFETFMFDUOPOF #VUUPO CVUUPO ҰݟɺDMBTT͕ͨ͘͞Μ͚ͭΒΕ͍ͯͯ#PPUTUSBQͷ΄͏͕εοΩϦͯ͠ݟ͑Δ Ͱ΋ͳͥྲྀߦͬͯΔͷ͔

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

࣮ࡍʹ࢖ͬͯΈΔ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

$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͸আ֎͞ΕΔ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

@BQQUTYͰJNQPSU import { AppProps } from "next/app"; import "tailwindcss/tailwind.css"; import "../styles/globals.css"; function MyApp({ Component, pageProps }: AppProps) { return ; } export default MyApp; UBJMXJOEDTTͱDTTΛJNQPSU

Slide 14

Slide 14 text

σϞ

Slide 15

Slide 15 text

νʔτγʔτ

Slide 16

Slide 16 text

74DPEF֦ுػೳ

Slide 17

Slide 17 text

$PNQPOFOUαϯϓϧू

Slide 18

Slide 18 text

1MVHJO

Slide 19

Slide 19 text

*DPOT

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

UBJMXJOEDTTKJU

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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