[React] React + Vite + TypeScript + TailwindCSS 설치 방법

1. Node.js 설치

공식 홈페이지에서 LTS 버전 다운로드 후 설치

설치 후 버전 확인

  

    
    
    
    
  
node -v #v22.13.0
npm -v #10.9.2

 

2. 리엑트 프로젝트 생성 (Vite + TypeScript)

프로젝트명(my-app) 은 변경 가능하며 . 으로 입력시 현재 디렉토리에  생성합니다 

  

    
    
    
    
  
npm create vite@latest app --template react-swc

 

3. 프로젝트 폴더로 이동

  

    
    
    
    
  
cd my-app

 

4. TailwindCSS 설치

윈도우에서 node 22 버전에서 현재 최신버전인 tailwind 4 를 설치시 설정 파일 생성이 안되는 오류가 있어 3버전으로 진행합니다.

  

    
    
    
    
  
npm install -D tailwindcss@3 postcss autoprefixer

 

5. Tailwind 설정 파일 생성

  

    
    
    
    
  
npx tailwindcss init -p

 

6. Tailwind 설정 파일 수정 (tailwind.config.js)

  

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

 

7. CSS 에 Tailwind  지시어 추가 (src/index.css 또는 App.css)

  

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

 

8. 메인 파일에서 CSS 연결 (main.ts)

  

    
    
    
    
  
import './style.css'

 

9. 개발 서버 실행

  

    
    
    
    
  
npm run dev

 

10. Tailwind 테스트 (App.tsx)

  

    
    
    
    
  
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-500">
        TailwindCSS 테스트 성공! 🎉
      </h1>
    </div>
  );
}

export default App

 

11. 테스트 결과 확인

테스트 화면이 아래와 같이 적용되었다면, 정상 적용되었습니다.

 

 

이로써 React + Vite + TypeScript + TailwindCSS 개발 환경 구성이 완료되었습니다.

 

즐거운 코딩하세요 :)