🎨 React + Vite에 Tailwind CSS 적용하는 방법

🎨 React + Vite에 Tailwind CSS 적용하는 방법

안녕하세요! 지난 글에서 Tailwind CSS가 왜 좋은지에 대해 알아봤죠?
이번 글에서는 실제로 React + Vite 프로젝트에 Tailwind CSS를 설치하고 적용하는 방법을 단계별로 정리해드릴게요.

---

✅ 1단계: 프로젝트 준비

먼저 Vite + React 프로젝트가 준비되어 있어야 합니다.
아직 생성하지 않으셨다면 아래 명령어로 먼저 프로젝트를 만들고 시작하세요.

npm create vite@latest my-app -- --template react
cd my-app
npm install

---

✅ 2단계: Tailwind CSS 설치

Tailwind CSS 관련 패키지를 설치합니다.

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

• 위 명령어는 tailwind.config.js와 postcss.config.js 파일을 생성합니다.

---

✅ 3단계: Tailwind 설정 수정

tailwind.config.js 파일을 열고 content 항목을 아래처럼 수정합니다.

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 설정은 Tailwind가 사용할 클래스들을 자동으로 감지할 수 있게 해줍니다.

---

✅ 4단계: 스타일 파일 생성 및 연결

src/index.css 파일을 만들고 아래와 같이 작성합니다.

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그 다음, src/main.jsx (또는 main.tsx)에 이 CSS 파일을 import 합니다.

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

---

✅ 5단계: 제대로 적용됐는지 확인

App.jsx에 Tailwind 클래스를 추가해봅니다.

// src/App.jsx
function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 text-white text-3xl font-bold">
      Hello Tailwind CSS!
    </div>
  )
}

export default App

---

✅ 6단계: 개발 서버 실행

이제 개발 서버를 다시 실행해봅니다.

npm run dev

브라우저에 Tailwind 스타일이 적용된 화면이 뜬다면 성공입니다!

---

🎯 마무리

이제 여러분의 React + Vite 프로젝트에 Tailwind CSS가 성공적으로 적용되었습니다!
앞으로는 복잡한 CSS 파일 없이, HTML 클래스만으로도 멋진 UI를 빠르게 만들 수 있어요.

---

📌 다음 글 예고

다음 포스팅에서는 Tailwind CSS로 자주 사용하는 UI 구성 요소(버튼, 카드, 폼 등)를 빠르게 만드는 방법을 소개해드릴게요.
지금까지 따라오시느라 고생 많으셨고, 궁금한 점은 댓글로 남겨주세요! 🙌