[React+Vite+Tailwind v4] 기본 설정하기

📦 1단계: Vite 기반 React + TypeScript 프로젝트 생성

🔧 명령어 (CMD에서 실행):

cd C:\RProjects\MXProjects
npm create vite@latest frontend -- --template react-ts

설명:

• frontend: 새로 생성될 폴더 이름
• react-ts: React + TypeScript 템플릿

🛠 2단계: 프로젝트 디렉토리 이동 및 의존성 설치

cd frontend
npm install

🎨 3단계: Tailwind CSS 설치

npm install -D tailwindcss @tailwindcss/vite autoprefixer

설명:

• postcss: 처음 안내는 이 것을 설치하라 했지만, 추가 확인 시 v4에서는 필요 없음
• @tailwindcss/vite: v4에서는 이것을 활용

📝 4단계: Tailwind 설정 파일 수동 생성

frontend 폴더 안에서 아래 두 파일을 수동으로 만듭니다:

🔧 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

🔧 postcss.config.js

export default {
  plugins: {},
}

설명:

• 기존 가이드는 아래와 같지만, v4에서는 위의 내용으로 가이드 받음.

  export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  }

📄 5단계: src/index.css 파일 생성

🔧 내용:

@import "tailwindcss";

설명:

• 기존 가이드는 아래와 같지만, v4에서는 위의 내용으로 가이드 받음

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

🧩 6단계: main.tsx에 Tailwind import 추가

src/main.tsx 파일 상단에 아래 코드 추가:

import './index.css';

예시:

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

🧪 7단계: Tailwind 적용 테스트

src/App.tsx 수정:

function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">
        Tailwind 적용 성공!
      </h1>
    </div>
  );
}

export default App;

🚀 8단계: 실행

npm run dev

브라우저에서 http://localhost:5173 열기

✅ 파란색 큰 글씨가 보이면 Tailwind + React 구성 성공!