728x90

Tailwind CSS를 Vite 플러그인으로 설치 및 설정 방법

Tailwind CSS를 Vite 플러그인으로 설치하면 Laravel, SvelteKit, React Router, Nuxt, SolidJS 같은 프레임워크와 원활히 통합할 수 있습니다.

1. Tailwind CSS 설치

tailwindcss와 @tailwindcss/vite를 npm으로 설치합니다.

npm install tailwindcss @tailwindcss/vite

2. Vite 플러그인 설정

Vite 설정 파일에 @tailwindcss/vite 플러그인을 추가합니다.

// vite.config.ts
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

3. Tailwind CSS 가져오기

CSS 파일에 Tailwind CSS를 @import로 추가합니다.

/* styles.css */
@import "tailwindcss";

4. 빌드 프로세스 실행

package.json에 설정된 빌드 명령어(예: npm run dev)를 실행합니다.

npm run dev

5. HTML에서 Tailwind CSS 사용

컴파일된 CSS 파일이 <head>에 포함되어 있는지 확인한 후, Tailwind의 유틸리티 클래스를 사용해 스타일을 적용합니다.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/styles.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

요약

tailwindcss와 @tailwindcss/vite 설치
vite.config.ts에 Tailwind 플러그인 추가
CSS 파일에 Tailwind CSS 임포트
npm run dev로 개발 서버 실행
HTML에서 Tailwind 유틸리티 클래스 사용

이 과정을 통해 Tailwind CSS를 Vite 프로젝트에 쉽게 통합할 수 있습니다.

Keywords

Tailwind CSS, Vite, Vite Plugin, React, CSS Framework프론트엔드, 스타일링, 유틸리티 클래스, 웹 개발, 빌드 도구

728x90

'IT Best Practise > React' 카테고리의 다른 글

Next.js 애플리케이션 관리 - PM2와 Systemd 비교 (0)	2025.06.16
Next.js 애플리케이션을 Systemd로 배포하기 (0)	2025.06.16
React Path Alias: 코드 가독성 및 유지보수성 향상 (0)	2025.06.01
Vite 기반 프로젝트 구조 (0)	2025.05.09
React-Typescript 프로젝트 생성 (0)	2025.05.09

GilliLab - TechLog