React 에 Tailwind CSS 활용하기
Post

React 에 Tailwind CSS 활용하기

01/11/2022
1

Tailwind CSS?

Utility-First 컨셉을 가진 CSS 프레임워크 중 하나로 각 속성들을 클래스에 직관적으로 표현할 수 있다.

1

<div class="text-bold text-white">TEST</div>

설치하기

  • Tailwind CSS 설치
    1

    yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
  • craco 설치
    1

    yarn add @craco/craco

    craco는 Create-React-App Configuration Override의 약어로, CRA에 config 설정을 덮어쓰기 위한 패키지이다.
    CRA는 기본적으로 PostCSS 구성을 재정의 할 수 없으므로 CRACO 를 이용한다.

설정하기

  • package.json 수정
    1
2
3
4
5
6

    "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},
  • craco.config.js 파일 생성 및 설정 내용 추가 package.json 과 동일한 위치에 저장한다.
    1
2
3
4
5
6
7
8
9
10

    module.exports = {
style: {
  postcss: {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
  },
},
}
  • tailwind.config.js 파일 생성
    1

    npx tailwindcss-cli@latest init
  • tailwind.config.js 설정
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    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 상단에 아래 속성을 추가하여 사용한다.

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;
react
react tailwindcss