react tailwind css 셋팅
리액트 프로젝트에서 Tailwind CSS를 초기 설정하는 방법에는 크게 두 가지가 있습니다. 공식 문서에 소개된 방법을 기준으로,
1) PostCSS를 사용하는 방식
2) Vite를 사용하는 방식
이 두 가지 방법을 설명하고, 각각의 차이점도 함께 알아보겠습니다.
1. PostCSS를 사용하는 방식
개요
PostCSS는 CSS를 변환하는 도구로, Tailwind CSS는 PostCSS 플러그인으로 동작합니다.
설치 및 설정 방법
- Tailwind CSS, PostCSS, @tailwindcss/postcss 설치
npm install tailwindcss @tailwindcss/postcss postcss
postcss.config.js파일을 생성하고 기본 설정
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}
src/index.css또는 프로젝트의 메인 CSS 파일에 Tailwind 지시문 추가
@import "tailwindcss";
- React 프로젝트에서
index.html에서 CSS 파일을 import
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
2. Vite를 사용하는 방식
개요
Vite는 빠른 빌드와 개발 서버를 제공하는 모던 빌드 도구입니다. Tailwind CSS와의 호환성이 좋으며, 설정이 간단하고 빠른 개발 환경을 제공합니다.
설치 및 설정 방법
- Vite 기반 React 프로젝트 생성
npm create vite@latest my-vite-app -- --template react
cd my-vite-app
- Tailwind CSS 및 관련 패키지 설치
npm install tailwindcss @tailwindcss/vite
- Vite configuration 내에 작성
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})
src/index.css에 Tailwind 지시문 추가
@import "tailwindcss";
- postcss와 동일하게
index.html에 작성 스타일 시트 추가
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
- 개발 서버 실행
npm run dev
두 방식의 차이점
| 구분 | PostCSS 방식 (CRA 등) | Vite 방식 |
|---|---|---|
| 빌드 도구 | Webpack 기반 (CRA 기본) | Vite (esbuild 기반) |
| 설정 난이도 | 다소 복잡할 수 있음 | 간단하고 빠름 |
| 빌드 속도 | 상대적으로 느림 | 매우 빠름 |
| 개발 경험 | 익숙한 CRA 환경 | 최신 모던 환경, 빠른 HMR 지원 |
| 프로젝트 유형 | 기존 레거시 프로젝트에 적합 | 새 프로젝트에 권장 |
마무리
- PostCSS 방식은 기존 CRA 기반 프로젝트에 Tailwind CSS를 추가할 때 적합합니다.
- Vite 방식은 새롭게 프로젝트를 시작하거나 빠른 개발 환경이 필요할 때 추천됩니다.
- 두 방식 모두 Tailwind CSS의 기본 사용법은 동일하며, 프로젝트 환경에 맞게 선택해서 사용하면 됩니다.
TL;DR
- 리액트에서 Tailwind CSS 설정은 PostCSS 방식과 Vite 방식 두 가지가 있다.
- PostCSS는 CRA 등 Webpack 기반, Vite는 빠른 모던 빌드 도구 환경 제공.
- 새 프로젝트는 Vite, 기존 프로젝트는 PostCSS 방식 추천.
댓글남기기