React 에 Tailwind 모듈 설치하기

tailwind 설치

> yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

craco 설치

> yarn add @craco/craco

 

package.json 수정

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

 

craco.config.js 파일 생성 및 아래 내용 추가 (package.json 동일 위치)

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

 

tailwind.config.js 파일 생성

npx tailwindcss-cli@latest init

tailwind.config.js 설정

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'blueColor' : 'blue',
        'whiteColor' : 'white'
    }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']
}​

 

css 상단에 속성 추가

@tailwind base;
@tailwind components;
@tailwind utilities;