Tailwind

React + Vite + Tailwind CSS 세팅 가이드

최신 버전 기준 (Vite 6.x / Tailwind CSS v4.x)

1단계. React + Vite 프로젝트 생성

JavaScript 버전

npm create vite@latest my-app -- --template react
Bash
복사

TypeScript 버전

npm create vite@latest my-app -- --template react-ts
Bash
복사

my-app 자리에 원하는 프로젝트 이름을 입력하세요.

프로젝트 폴더로 이동 후 패키지 설치

cd my-app
npm install
Bash
복사

생성된 폴더 구조

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── eslint.config.js
├── index.html
├── package.json
├── README.md
└── vite.config.js
Plain Text
복사

2단계. Tailwind CSS v4 설치

Tailwind + Vite 플러그인 설치

npm install tailwindcss @tailwindcss/vite
Bash
복사

 Tailwind v4부터는 별도의 postcss, autoprefixer 설치가 필요 없습니다.

3단계. vite.config.js 수정

기존 파일을 아래와 같이 수정합니다.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'   // ← 추가

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),   // ← 추가
  ],
})
JavaScript
복사

4단계. index.css 수정

src/index.css 파일의 기존 내용을 모두 지우고 아래 한 줄만 추가합니다.

/* src/index.css */
@import "tailwindcss";
CSS
복사

 Tailwind v4부터는 tailwind.config.js 파일이 필요 없습니다.

CSS 파일에서 @import "tailwindcss" 한 줄로 모든 설정이 완료됩니다.

5단계. 동작 확인

src/App.jsx를 열어 Tailwind 클래스를 적용해봅니다.

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white rounded-2xl shadow-lg p-10 text-center">
        <h1 className="text-4xl font-bold text-blue-600 mb-4">
          React + Vite + Tailwind
        </h1>
        <p className="text-gray-500 text-lg">
          세팅 완료! 🎉
        </p>
        <button className="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
          시작하기
        </button>
      </div>
    </div>
  )
}

export default App
JavaScript
복사

6단계. 개발 서버 실행

npm run dev
Bash
복사

브라우저에서 http://localhost:5173 접속 후 Tailwind 스타일이 적용되면 완료입니다.

전체 세팅 요약

# 1. 프로젝트 생성
npm create vite@latest my-app -- --template react

# 2. 폴더 이동 및 패키지 설치
cd my-app
npm install

# 3. Tailwind 설치
npm install tailwindcss @tailwindcss/vite
Bash
복사

// vite.config.js 수정
import tailwindcss from '@tailwindcss/vite'

plugins: [react(), tailwindcss()]
JavaScript
복사

/* src/index.css - 기존 내용 삭제 후 추가 */
@import "tailwindcss";
CSS
복사

v3 vs v4 차이점

항목	Tailwind v3	Tailwind v4
설치 패키지	tailwindcss postcss autoprefixer	tailwindcss @tailwindcss/vite
설정 파일	tailwind.config.js 필요	필요 없음
PostCSS 설정	postcss.config.js 필요	필요 없음
CSS import	@tailwind base/components/utilities 3줄	@import "tailwindcss" 1줄
커스텀 설정	tailwind.config.js 에서 수정	index.css 에서 @theme 사용

Tailwind v4 커스텀 색상/폰트 설정

v4에서는 index.css 안에서 직접 커스텀 설정을 합니다.

/* src/index.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-heading: "Pretendard", sans-serif;
  --breakpoint-xs: 480px;
}
CSS
복사

{/* 커스텀 색상 사용 */}
<button className="bg-primary text-white">버튼</button>
JavaScript
복사