[React] Tailwind CSS가 적용되지 않는 문제 해결법

열심히 BOJ-AutoSync 프로젝트를 진행하며 tailwind를 통해 디자인을 적용해보려 했지만, 문제가 발생했습니다.

열심히 작성한 React 코드가 전혀 웹 브라우저에서 동작하지 않아 html 문서 그대로 보인다는 점이었습니다😰 이번 포스팅에서는 Tailwind CSS를 설치하고 반영하는 방법에 알아보겠습니다.

 

Tailwind CSS 설치 여부 확인하기

프로젝트 루트 위치에서 터미널을 열어 npm list tailwindcss을 입력해 Tailwind CSS가 설치되어 있는지 확인해봅니다.

확인해본 결과, 제 경우에는 이미 잘 설치가 되어 있는 상태였습니다. 만약 그렇지 않다면, 아래 명령어들을 순차적으로 실행해 Tailwind CSS를 설치해줍니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

Tailwind config 파일 추가하기

설치가 완료됐다면, 프로젝트에서 Tailwind를 사용할 수 있도록 설정 파일을 작성해야 합니다.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

프로젝트에 tailwind.config.js 적용하기

설정 파일이 작성됐다면, 이제 css 파일과 메인 js 파일에 tailwind를 반영해줄 차례입니다!

먼저, src/index.css의 맨위 상단에 아래 코디네이터를 추가해줍니다.

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

index.css 파일을 프로젝트에 반영하기 위해서는 프로젝트 진입점인 App.js 또는 Main.js의 맨 상단 부분에 다음 임포트문이 추가되어야 합니다.

// src/App.js
import './index.css';

 

CSS 빌드 및 적용하기

마지막으로 Tailwind를 빌드를 해줄 차례입니다. packages.json에서 "scripts" 부분에 아래 "tailwind:watch"에 해당하는 줄을 추가해줘야 합니ㅏㄷ.

// packages.json
"scripts": {
  ...
  "tailwind:watch": "npx tailwindcss -i ./src/index.css -o ./src/output.css --watch"
}

 

프로젝트를 Tailwind와 함께 실행해보기 위해서는 먼저 다음 명령어를 통해 Tailwind를 실행해줘야 합니다!

npm run tailwind:watch

 

위 명령어가 잘 돌아가고 있다면, 별도의 터미널을 열어 npm start를 실행해 서버가 잘 작동하는지 확인해봅니다.

다행히 잘 작동하고 있는 것을 확인할 수 있었습니다🎉 다음 포스팅에서는 본격적으로 프로젝트 개발 과정에 대해 소개하도록 하겠습니다.