Tailwind CLI로 설치하기
Tailwind CLI로 설치하기
자체 빌드 도구 없이 Tailwind CSS를 컴파일하고 싶다면 Tailwind CLI를 사용할 수 있어요. npm으로 패키지를 설치하고 몇 가지 명령만 실행하면 돼요.
출처: 문서
본문
01 — 패키지 설치하기
npm으로 tailwindcss와 @tailwindcss/cli를 설치하세요.
Terminal
npm install tailwindcss @tailwindcss/cli
02 — CSS에서 Tailwind 가져오기
메인 CSS 파일에 @import "tailwindcss"; 구문을 추가하세요.
src/input.css
@import "tailwindcss";
03 — Tailwind CLI 빌드 과정 실행하기
CLI 도구를 실행해 소스 파일에서 클래스를 스캔하고 CSS를 빌드하세요.
Terminal
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
04 — HTML에서 Tailwind 사용하기
컴파일된 CSS 파일을 <head>에 추가하고, Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.
src/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>