React 프로젝트에서 스타일링을 위해 Tailwind CSS를 설치하는 과정입니다.

0. 프로젝트 폴더로 이동

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

1. Tailwind CSS 설치하기

이제 Tailwind CSS를 설치하고 구성 파일을 초기화합니다:

npm install -D tailwindcss
npx tailwindcss init

2. 템플릿 경로 구성하기

tailwind.config.js 파일을 열고 템플릿 파일의 경로를 추가합니다:

// tailwind.config.js

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

3. CSS에 Tailwind 지시문 추가하기

./src/index.css 파일에 각 레이어의 Tailwind 지시문을 추가합니다:

/* ./src/index.css */

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

4. 빌드 프로세스 시작하기

명령어로 빌드 프로세스를 시작합니다:

npm run start

5. 프로젝트에서 Tailwind 사용하기

이제 프로젝트가 설정되었으므로 컴포넌트에서 Tailwind CSS 유틸리티 클래스를 사용할 수 있습니다.

Copy code
// App.js

import React from 'react';

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

이제 text-3xl, font-bold, underline 클래스가 h1 요소에 적용됩니다.