software

React 앱에 Tailwind CSS를 추가하는 방법 (단계별 가이드)

발행: (2025년 12월 26일 오전 01:41 GMT+9)
4 min read
원문: Dev.to

Source: Dev.to

Introduction

이 가이드에서는 Tailwind CSS가 무엇인지, React 프로젝트에서 어떻게 사용하는지, 그리고 개발자들이 왜 이를 선택하는지에 대해 설명합니다.

Tailwind CSS – flex, pt-4, text-center, rotate-90와 같은 클래스를 제공하는 유틸리티‑퍼스트 CSS 프레임워크로, 마크업 안에서 직접 조합해 어떤 디자인이든 만들 수 있습니다. — Tailwind CSS 공식 웹사이트

Prerequisites

  • 시스템에 Node.js가 설치되어 있어야 합니다. (무료로 설치하려면 Node.js 웹사이트를 방문하세요.)
  • React 프로젝트가 있거나 만들 준비가 되어 있어야 합니다 – 아래 단계에서 확인하세요.
  • React에 대한 기본 지식.

Note: 아직 React 앱을 만들지 않았다면 걱정하지 마세요 – 다음 섹션에서 다룹니다.

Why Tailwind CSS?

  • 미리 정의된 수많은 클래스를 제공하는 유틸리티‑퍼스트 접근 방식.
  • 각 요소마다 커스텀 CSS를 작성하지 않아도 UI를 빠르게 구축 가능.
  • 마크업 안에서 바로 반응형 디자인 구현.
  • React 컴포넌트와 원활하게 동작.
  • Shopify와 Cursor와 같은 최신 사이트 및 도구에서 사용. — Source: Tailwind CSS 공식 웹사이트

Step 1 – Create a React App

Create the project with Vite

npm create vite@latest project-name

Vite는 빠른 개발을 위해 React 문서에서 권장합니다. (“How to Create a React App”에 대한 자세한 비교는 제 블로그를 참고하세요.)

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

위 명령으로 package.json에 의존성이 추가됩니다.

Configure the Vite plugin

project-name/vite.config.js 파일을 열고 Tailwind 플러그인을 추가합니다:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Import Tailwind CSS

project-name/src/index.css 파일을 편집하고 내용을 다음과 같이 교체합니다:

@import "tailwindcss";

Use Tailwind classes in a component

// src/App.tsx (or App.jsx)
function App() {
  return (
    <>
      {/* Add Tailwind classes to style your elements */}
      Hello World
    </>
  );
}

export default App;

위 예시에서는 배경, 텍스트 색상, 폰트 크기, 폰트 패밀리, 텍스트 정렬, 마진 등이 모두 Tailwind 유틸리티 클래스로 제어됩니다.

Conclusion

우리는 Tailwind CSS가 무엇인지, 왜 인기가 있는지, 그리고 Vite로 만든 React 프로젝트에 어떻게 설치하고 사용하는지 살펴보았습니다. 단계는 초보자 친화적으로 구성되어 있어, 깊이 있는 내용에 압도되지 않도록 했습니다.

설치하거나 사용 중에 문제가 발생하면 언제든지 댓글을 남겨 주세요 – 기꺼이 도와드리겠습니다.

Further Reading

Back to Blog

관련 글

더 보기 »