리액트에서 tailwindcss 사용하기 효율 U P ↗

우연한 기회에 프론트와 한발자욱쓱 가까와지고 있는 구와리..

 

 

 

돈와리.. 

 

시장에 내가 할 일은 많고 많지 

 

사람들과 잘 어울린다면 마랴.. 에후

 

 

---

 

 

 

리액트에서 필요한 css객체만 생성해 앱 구동의 효율을 높여준다는 tailwindcss .

 

tailwindcss.com/docs/installation

 

 

위 경로로 들어가서 안내하고 있는 cmd 명령어를 리액트의 기본 구성 파일인 src의 부모 폴더 경로에서

실행해주면 되는데요.

 

 

 

 

 

 

1. 먼저 tailwindcss를 설치

npm install -D tailwindcss

 

 

 

2. 위 모듈을 활용하기 위한 환경설정 파일을 생성시켜주기

 

npx tailwindcss init

 

 

tailwindcss.config.js

 

 

 

 

 

 

 

>> src 폴더의 형제 계층으로 'tailwindcss.config.js'파일이 생성되는 것을 확인하실 수 있을거예요.

tailwindcss.config.js

 

 

 

 

 

 

 

 

 

src폴더내의 모든 파일들에 대해 css를 효율적으로 적용시켜줄 수 있도록,

contents 속성에 대한 값을 부여해줄겁니다.

 

 

contents의 값을 넣는 대괄호 안에 "./src/**/*.{html,js,jsx}"를 입력해주세요.

 

 

>>

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js,jsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

};

 

 

 

 

 

"현재 내가 cmd창에서 접근해있는 PATH에 있는 src파일의 모든 자식 파일 속의 모든 html,js,jsx 확장자를 가진 파일들에 대해서 tailwindcss의 효과가 부여될거다"

 

 

 

---

 

 

 

tailwindcss는 실제로 해당 프로젝트에서 사용되는 style만을 포함시켜

> css파일 크기를 최적화,

> 구동 환경 성능을 향상

할 수 있다고 합니다.  

 

 

 

 

---

 

 

 

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{js,jsx,ts,tsx}"],

  theme: {

    extend: {

      fontSize: {

        no: "0rem",

      },

      colors: {

        "mbti-yellow": "#F9F9CF",

        "mbti-deep-yellow": "#fff890",

        "mbti-blue": "#1898fd",

        "mbti-light-blue": "#9cd2ff",

        "mbti-purple": "#C17DD1",

        "mbti-deep-purple": "#5d62fa",

        "mbti-mint": "#8CFFEE",

        "mbti-deep-mint": "#d0e9cc",

        "mbti-pink": "#FF9CAA",

        "mbti-light-pink": "#FFE5E6",

        "mbti-red": "#FF0000",

        "mbti-mac-red": "#fa517c",

        "mbti-light-mint": "#6EFFEE",

        "mbti-deeplight-mint": "#C3FCF1",

        "mbti-brown": "#625F4E",

        "mbti-light-brown": "#AFAB99",

        "mbti-light-orange": "#FFCA8D",

        "mbti-coral": "#F98E71",

        "mbti-light-coral": "#FECCBE",

        "mbti-deep-blue": "#645CBB",

        "mbti-gray": "#4A4737",

      },

      fontFamily: {

        minhye: ["Minhye", "sans-serif"],

        humanbumsuk: ["Humanbumsuk", "sans-serif"],

        kyobohandwriting2021sjy: ["KyoboHandwriting2021sjy", "sans-serif"],

        cafe24shiningstar: ["Cafe24Shiningstar", "sans-serif"],

        middleschool_student: ["Middleschool_student", "sans-serif"],

        beeunhye: ["Beeunhye", "sans-serif"],

        bisang: ["Bisang", "sans-serif"],

        cafe24surround: ["Cafe24Ssurround", "sans-serif"],

        eland: ["ELAND_Nice_M", "sans-serif"],

        pretendard: ["Pretendard-Regular", "sans-serif"],

      },

      height: {

        12.5: "52px",

      },

      maxHeight: {

        12.5: "52px",

      },

      padding: {

        full: "100%",

        12.5: "52px",

      },

      borderRadius: {

        "4xl": "2.25rem",

      },

      backgroundSize: {

        "hand-heart": "34px 67px",

      },

      minWidth: {

        16: "4rem",

        20: "5rem",

      },

      maxWidth: {

        16: "4rem",

        20: "5rem",

      },

    },

  },

  plugins: [require("@designbycode/tailwindcss-text-stroke")],

};

tailwindcss.config.js

 

 

 

각 파일에서는 태그 내의 속성 className으로 위에 지정한 key값을 부여해주면 된답니다.

 

모듈이나 플러그인을 관리해주는 package.json에서 "devDependencies"의 값으로 뭘 추가해라하면

에러문구에서 복붙하지 마시고 'npm install ... '하는 방법으로 해결합시다