React 프로젝트에 Tailwind CSS 적용하기

React 프로젝트에서 Tailwind CSS를 활용하려면 몇 가지 단계를 거쳐야 한다. 이를 정리해보자

프로젝트 만들기

tailwind를 설치하기 전에 프로젝트 디렉토리를 먼저 구성해야한다. 만약 이미 존재하는 프로젝트에 적용하면 이 파트는 패스가 가능하다.

npx create-react-app my-project
cd my-project

설치하기 & Tailwind CSS구성파일 적용하기

그다음 Tailwind를 설치하고 프로젝트에 적용하자

npm install -D tailwindcss
npx tailwindcss init

사용을 위한 경로 설정하기

프로젝트에 구성된 CSS를 적용하기위해서는 경로를 인식시켜주어야한다.

//tailwind.config.js 파일

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

##

Tailwind를 CSS 파일에 import하기

마지막으로, Tailwind를 CSS 파일에 import해야한다. src 디렉토리 내에 index.css 상단에 아래 내용을 적용하자

//index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

이제부터 React 프로젝트에서 Tailwind CSS를 사용할 수 있다. Tailwind CSS doc을 참고하면서 빠르게 CSS를 적용해보자