GWCoding HOME
Tech Stack/TailWind

[Tailwind CSS] 02. Vite + React 프로젝트에 Tailwind 설치하기

2026. 5. 18. 23:07

[Tailwind CSS] 02. Vite + React 프로젝트에 Tailwind 설치하기

지난 글에서는 Tailwind CSS가 무엇인지, 기존 CSS 방식과 어떤 차이가 있는지 알아보았습니다. 이번 글에서는 직접 Vite + React 프로젝트에 Tailwind CSS를 설치하는 과정을 정리해보겠습니다.

Tailwind는 CDN으로도 간단히 테스트해볼 수 있지만, 실제 프로젝트나 포트폴리오에서는 설치형으로 사용하는 것이 좋습니다. 빌드 과정에 포함되어야 사용하지 않는 스타일을 줄이고, 프로젝트 구조 안에서 안정적으로 관리할 수 있기 때문입니다.

1. 이번 글에서 만들 프로젝트 구조

이번 글에서는 가장 많이 사용하는 조합 중 하나인 Vite + React + Tailwind CSS 기준으로 진행합니다.

  • Vite : 빠른 프론트엔드 개발 도구
  • React : 화면을 컴포넌트 단위로 만드는 라이브러리
  • Tailwind CSS : 유틸리티 클래스로 UI를 꾸미는 CSS 프레임워크

처음부터 복잡한 설정을 넣기보다는, Tailwind가 정상적으로 적용되는지 확인하는 데 집중하겠습니다.

2. Vite + React 프로젝트 생성하기

먼저 터미널에서 Vite 프로젝트를 생성합니다. 프로젝트 이름은 예시로 tailwind-study라고 하겠습니다.

npm create vite@latest tailwind-study -- --template react

프로젝트가 생성되면 해당 폴더로 이동합니다.

cd tailwind-study

그리고 기본 패키지를 설치합니다.

npm install

여기까지 하면 React 프로젝트의 기본 준비가 끝납니다.

3. Tailwind CSS 설치하기

이제 Tailwind CSS를 설치합니다. Vite 프로젝트에서는 tailwindcss와 @tailwindcss/vite를 함께 설치합니다.

npm install tailwindcss @tailwindcss/vite

설치가 끝나면 Tailwind를 Vite 설정에 연결해야 합니다.

4. vite.config.js 설정하기

프로젝트 루트에 있는 vite.config.js 파일을 열어줍니다. 그리고 Tailwind 플러그인을 추가합니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

여기서 중요한 부분은 tailwindcss()가 Vite 플러그인으로 등록되었다는 점입니다. 이 설정을 통해 Vite 빌드 과정에서 Tailwind가 함께 동작하게 됩니다.

5. CSS 파일에 Tailwind 불러오기

이제 CSS 파일에서 Tailwind를 불러와야 합니다. 보통 Vite React 프로젝트에서는 src/index.css 파일을 사용합니다.

기존 내용이 있다면 테스트용으로 잠시 정리하고, 아래 한 줄을 추가합니다.

@import "tailwindcss";

이 한 줄이 Tailwind의 유틸리티 클래스를 프로젝트에서 사용할 수 있게 해줍니다.

6. main.jsx에서 CSS 연결 확인하기

Tailwind를 불러온 CSS 파일이 React 프로젝트에 연결되어 있어야 합니다. src/main.jsx 파일에서 아래 코드가 있는지 확인합니다.

import './index.css'

이 코드가 빠져 있으면 index.css가 적용되지 않기 때문에 Tailwind 클래스도 화면에 반영되지 않습니다.

전체 구조는 대략 아래와 비슷합니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

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

7. App.jsx에서 Tailwind 적용 테스트하기

이제 Tailwind가 정상적으로 적용되는지 확인해보겠습니다. src/App.jsx 파일을 아래처럼 수정합니다.

function App() {
  return (
    <main className="min-h-screen bg-slate-50 px-6 py-10">
      <section className="mx-auto max-w-3xl rounded-2xl border border-slate-200 bg-white p-8 shadow-sm">
        <p className="text-sm font-semibold text-blue-600">
          Tailwind CSS
        </p>

        <h1 className="mt-3 text-3xl font-bold text-slate-900">
          Vite + React에 Tailwind 설치하기
        </h1>

        <p className="mt-4 text-base leading-7 text-slate-600">
          Tailwind CSS는 작은 유틸리티 클래스를 조합하여
          빠르고 일관된 UI를 만들 수 있게 도와줍니다.
        </p>

        <button className="mt-6 rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700">
          설치 확인
        </button>
      </section>
    </main>
  )
}

export default App

이 코드에서 사용한 bg-slate-50, rounded-2xl, text-blue-600, px-5, py-3 같은 클래스들이 Tailwind 클래스입니다.

8. 개발 서버 실행하기

이제 프로젝트를 실행합니다.

npm run dev

터미널에 로컬 주소가 표시되면 브라우저에서 접속합니다. 보통 아래와 같은 주소를 사용합니다.

http://localhost:5173

화면에 흰색 카드, 파란색 버튼, 둥근 모서리, 여백이 적용되어 보인다면 Tailwind 설치가 정상적으로 완료된 것입니다.

9. Tailwind가 적용되지 않을 때 확인할 것

설치를 했는데도 Tailwind가 적용되지 않는 경우가 있습니다. 그럴 때는 아래 내용을 먼저 확인해보면 좋습니다.

확인 항목 설명
@tailwindcss/vite 설치 여부 Vite 플러그인이 설치되어 있어야 합니다.
vite.config.js 설정 tailwindcss()가 plugins 배열에 들어가 있어야 합니다.
index.css import @import "tailwindcss";가 있어야 합니다.
main.jsx 연결 import './index.css'가 빠지면 CSS가 적용되지 않습니다.
개발 서버 재시작 설정 파일을 수정했다면 서버를 껐다가 다시 실행하는 것이 좋습니다.

10. 예전 설치 방식과 헷갈리지 않기

Tailwind를 검색하다 보면 예전 방식의 설치 글도 많이 나옵니다. 특히 아래와 같은 코드를 본 적이 있을 수 있습니다.

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

또는 아래 명령어를 사용하는 글도 있습니다.

npx tailwindcss init -p

이 방식은 예전 버전의 Tailwind 설치 글에서 자주 볼 수 있습니다. 현재 Vite 기준으로 처음 설치하는 경우에는 @import "tailwindcss";와 @tailwindcss/vite 플러그인 방식을 먼저 익히는 것이 좋습니다.

즉, 최신 글과 예전 글을 섞어서 따라 하면 설정이 꼬일 수 있으므로 한 가지 방식으로 정리해서 진행하는 것이 중요합니다.

11. 설치 후 폴더 구조 예시

설치가 끝난 뒤 핵심 파일 구조는 아래와 같습니다.

tailwind-study
├─ node_modules
├─ public
├─ src
│  ├─ App.jsx
│  ├─ index.css
│  └─ main.jsx
├─ package.json
└─ vite.config.js

여기서 Tailwind와 직접 관련 있는 파일은 주로 vite.config.js, index.css, App.jsx입니다.

  • vite.config.js : Tailwind 플러그인 등록
  • index.css : Tailwind CSS import
  • App.jsx : Tailwind 클래스 사용

12. 정리

이번 글에서는 Vite + React 프로젝트에 Tailwind CSS를 설치하는 방법을 정리했습니다. 핵심 흐름은 어렵지 않습니다.

  1. Vite + React 프로젝트 생성
  2. tailwindcss, @tailwindcss/vite 설치
  3. vite.config.js에 Tailwind 플러그인 등록
  4. index.css에 @import "tailwindcss"; 추가
  5. React 컴포넌트에서 Tailwind 클래스 사용
  6. npm run dev로 화면 확인

Tailwind는 설치 자체보다, 설치 후에 클래스 규칙을 익히는 과정이 더 중요합니다. 다음 글부터는 실제로 많이 쓰는 유틸리티 클래스들을 하나씩 정리해보겠습니다.

다음 편 예고

[Tailwind CSS] 03. Utility Class 개념 이해하기

다음 편에서는 bg-blue-600, text-white, px-4, rounded-lg처럼 Tailwind 클래스가 어떤 규칙으로 만들어지는지 알아보겠습니다.

GWDEVELBlog

 

'Tech Stack > TailWind' 카테고리의 다른 글

[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기  (0) 2026.05.21
[Tailwind CSS] 03. Utility Class 개념 이해하기  (0) 2026.05.19
[Tailwind CSS] 01. Tailwind CSS란? 왜 많이 사용할까?  (0) 2026.05.17
Tech Stack/TailWind 카테고리의 다른 글 더보기

티스토리툴바