Tailwind CSS 설치하기
Tailwind CSS 설치하기 (Installation)
Tailwind CSS는 여러분이 작성한 HTML 파일과 자바스크립트 컴포넌트, 그 밖의 템플릿에서 클래스 이름을 전부 스캔해서 해당하는 스타일을 생성하고, 이를 하나의 정적 CSS 파일로 써 내려가는 프레임워크예요. 그래서 실제로 사용된 클래스만 산출물에 남아, 파일이 크지 않으면서도 정확한 스타일이 적용돼요. 실행 시점에 계산하는 런타임이 없어서(zero-runtime) 빠르고 가볍죠.
Vite 플러그인으로 설치하기
Tailwind를 Vite 플러그인으로 설치하는 방식이 Laravel, SvelteKit, React Router, Nuxt, SolidJS 같은 프레임워크와 가장 매끄럽게 연동되는 방법이에요. 단계를 차근차근 따라가 볼게요.
먼저 아직 Vite 프로젝트가 없다면 새 프로젝트를 만들어요. create-vite를 쓰는 게 일반적이에요.
npm create vite@latest my-project
cd my-project
다음으로 tailwindcss와 @tailwindcss/vite 패키지를 npm으로 설치해요.
npm install tailwindcss @tailwindcss/vite
그리고 Vite 설정 파일에 @tailwindcss/vite 플러그인을 추가해요.
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
CSS 파일에 @import "tailwindcss" 한 줄을 넣으면 Tailwind가 로드돼요.
@import "tailwindcss";
이제 npm run dev로 빌드 프로세스를 돌리면, 준비된 CSS를 <head>에 포함시킨 뒤 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와의 설정이 조금씩 달라져서 막힐 때가 있어요. 그러면 공식 문서의 프레임워크 가이드를 확인해 보면 더 많은 예시를 볼 수 있어요.