Tailwind CSS를 React 앱에 통합하는 방법

1단계: 반응 프로젝트 생성

이 게시물에서는 create-react-app를 사용하여 반응 프로젝트를 생성합니다. 이렇게 하면 상대적으로 빠르게 코딩을 시작할 수 있도록 필요한 모든 것이 설정됩니다. 명령줄을 열고 다음 명령을 사용합니다.

npmnpx create-react-app react-app-with-tailwindcd react-app-with-tailwind
실yarn create react-app react-app-with-tailwindcd react-app-with-tailwind

2단계: Tailwind CSS 설치

반응 프로젝트를 생성한 후 디렉터리를 프로젝트 폴더로 변경합니다. 여기가 우리가 tailwind와 그것의 의존성을 설치할 곳입니다.

npmnpm install -D tailwindcss postcss autoprefixer
실yarn add -D tailwindcss postcss autoprefixer
이렇게 하면 dev 종속성에 tailwindcss postcss 및 autoprefixer가 설치됩니다.

3단계: 구성 파일 생성

다음 단계는 tailwind css에 필요한 구성 파일을 생성하는 것입니다. 다음 명령으로 파일을 생성할 수 있습니다.

npmnpx tailwindcss init -p
실yarn tailwindcss init -p
이렇게 하면 두 개의 파일이 생성됩니다.

tailwind.config.js

postcss.config.js

생성된 파일에는 기본 구성이 이미 설정되어 있습니다.

4단계: 파일 경로 구성

내부tailwind.config.js에서 React 파일의 경로를 지정해야 합니다.

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

이것은 tailwind에게 클래스 이름을 찾고 해당 클래스 이름과 관련된 스타일을 적용하도록 경로를 알려줍니다.

5단계: Tailwind 지시문 추가

index.css에 다음 줄을 추가합니다.

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

그게 다야!
Tailwind CSS가 React 앱에 성공적으로 설정되었습니다. 이제 프로젝트에서 유틸리티 클래스를 사용할 수 있습니다.