Tailwind CSS 설치 및 환경 설정 (React)

Tailwind CSS 설치 및 환경 설정 (React)

1. 프로젝트 초기 설정

먼저 React와 TypeScript 프로젝트를 생성합니다.

npx create-react-app my-app --template typescript
cd my-app

• 이 명령어를 실행하면 TypeScript 기반의 React 프로젝트가 생성됩니다.

2. Tailwind CSS 설치

Tailwind CSS와 필요한 패키지들을 설치합니다.

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

• tailwindcss: 핵심 라이브러리
• postcss: CSS 전처리기
• autoprefixer: 브라우저 호환성을 위한 자동 접두사 추가

npx tailwindcss init -p 명령어는 tailwind.config.js와 postcss.config.js 파일을 생성합니다.

3. Tailwind 설정 파일 구성

3.1 tailwind.config.js 수정

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

• content 배열에 Tailwind가 적용될 파일 경로를 지정합니다.
• ./src/**/*.{js,ts,jsx,tsx}는 src 폴더 내의 모든 JS, TS, JSX, TSX 파일을 포함합니다.

4. 글로벌 CSS 설정

src/index.css 파일을 열어 Tailwind의 기본 스타일을 추가합니다.

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

• 이 코드는 Tailwind의 초기화 스타일, 컴포넌트 스타일, 유틸리티 클래스들을 불러옵니다.

5. React 프로젝트에 적용하기

src/index.tsx 파일에서 index.css를 불러옵니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 이제 Tailwind CSS가 React 프로젝트에 적용됩니다.

6. Tailwind CSS 테스트

src/App.tsx 파일을 열어 Tailwind 클래스가 잘 적용되는지 확인합니다.

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-500">
        Hello, Tailwind CSS with React & TypeScript!
      </h1>
    </div>
  );
};

export default App;

• min-h-screen: 최소 높이를 화면 전체로 설정
• bg-gray-100: 연한 회색 배경색 적용
• flex, items-center, justify-center: Flexbox를 사용한 가운데 정렬
• text-4xl, font-bold, text-blue-500: 글자 크기, 두께, 색상 설정

7. 빌드 최적화 (선택 사항)

프로덕션 빌드 시 사용하지 않는 CSS를 제거하여 파일 크기를 줄일 수 있습니다.

7.1 tailwind.config.js에 Purge 설정 추가

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

• Tailwind CSS v3 이상에서는 purge 대신 content 속성을 사용합니다.
• 빌드 시 자동으로 사용하지 않는 CSS가 제거됩니다.