[React]Vite + React 프로젝트에 Tailwind CSS 설정하기

Vite + React로 생성한 프로젝트에서 Tailwind CSS 설정 시 제대로 사용이 되지 않는 어려움이 있어서 설정 및 사용법에 대해서 포스팅 해본다.

Tailwind CSS는 유틸리티 우선 접근방식의 CSS 프레임워크로, 빠르고 유연한 스타일링을 가능하게 하는 도구이다. 🎨

프로젝트 환경 구성 📋

먼저 Vite와 React 프로젝트를 생성하는 것부터 시작할 것이다.

npm create vite@latest my-project -- --template react
cd my-project

Tailwind CSS 설치하기 ⚙️

프로젝트 생성 후, Tailwind CSS와 필요한 의존성을 설치한다.

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

이 명령어는 두 개의 파일을 생성할 것이다:

• tailwind.config.js: Tailwind CSS 설정 파일
• postcss.config.js: PostCSS 설정 파일

Tailwind 설정하기 ⚡

tailwind.config.js 파일을 열고 다음과 같이 내용을 수정한다:

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

CSS 파일 수정하기 🎯

src/index.css 파일을 열고 Tailwind의 기본 스타일을 import 한다:

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

작동 확인하기 ✨

이제 프로젝트의 App.jsx 파일을 수정하여 Tailwind 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-600">
        Hello Tailwind CSS! 👋
      </h1>
    </div>
  )
}

export default App

개발 서버 실행하기 🌐

npm run dev

마무리 📝

이렇게 하면 Vite + React 프로젝트에서 Tailwind CSS를 사용할 준비가 완료된 것이다. 이제 Tailwind의 강력한 유틸리티 클래스들을 사용하여 빠르고 효율적인 스타일링을 시작할 수 있다.

참고: https://tailwindcss.com/docs