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

Tailwindcssを使ってみる

July 06, 2021

 Tailwindcssを使ってみる

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

July 06, 2021
Tweet

More Decks by ▲

Other Decks in Programming

Transcript

  1. 5BJMXJOEDTTΛ࢖ͬͯΈΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ࣮ࡍʹ࢖ͬͯΈΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. @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

    View full-size slide

  13. νʔτγʔτ

    View full-size slide

  14. 74DPEF֦ுػೳ

    View full-size slide

  15. $PNQPOFOUαϯϓϧू

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. UBJMXJOEDTTKJU

    View full-size slide

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

    View full-size slide

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

    View full-size slide