Vite로 설치하기

Vite 기반 프로젝트에서 Tailwind CSS를 설치하는 가장 보편적인 방법이에요. Vite 플러그인 하나만 설치하고 설정에 추가하면 최신 Tailwind v4의 CSS-first 방식 그대로 사용할 수 있어요.

출처: 문서

본문

01 — 새 Vite 프로젝트 만들기

아직 프로젝트가 없다면 먼저 새 Vite 프로젝트를 만드세요. 가장 흔한 방법은 Create Vite를 사용하는 것이에요.

Terminal

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

02 — Tailwind CSS 설치하기

npm으로 tailwindcss와 @tailwindcss/vite를 설치하세요.

Terminal

npm install tailwindcss @tailwindcss/vite

03 — Vite 플러그인 설정하기

Vite 설정에 @tailwindcss/vite 플러그인을 추가하세요.

vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

04 — Tailwind CSS 가져오기

Tailwind CSS를 가져오는 @import를 CSS 파일에 추가하세요.

CSS

@import "tailwindcss";

05 — 빌드 과정 실행하기

npm run dev 또는 package.json 파일에 설정된 명령으로 빌드 과정을 실행하세요.

Terminal

npm run dev

06 — HTML에서 Tailwind 사용하기

컴파일된 CSS가 <head>에 포함되어 있는지 확인하고(프레임워크가 알아서 처리해 줄 수도 있어요), Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.

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>

막혔나요? Vite로 Tailwind를 설정하는 것은 빌드 도구마다 조금씩 다를 수 있어요. 자신의 특정 설정에 더 구체적인 안내가 있는지 framework guides를 확인해 보세요.

프레임워크 가이드 살펴보기

Vite로 설치하기