HTML만으로 Tailwind CSS 사용하기

tailwindcsshtmlcssnode
Tailwind CSS with HTML
Photo by Nubelson Fernandes on Unsplash

정적 웹사이트나 간단한 HTML 프로젝트에서 Tailwind CSS를 사용하고 싶다면, 복잡한 빌드 도구 없이 Tailwind CLI만으로 충분합니다.

프로젝트 설정

먼저 프로젝트 폴더를 만들고 초기화합니다.

mkdir my-project
cd my-project
npm init -y

Tailwind CSS를 설치합니다.

npm install -D tailwindcss
npx tailwindcss init

설정 파일

tailwind.config.js에서 HTML 파일 경로를 지정합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS 파일 생성

src/input.css 파일을 만듭니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

HTML 작성

index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="dist/output.css" rel="stylesheet">
  <title>Tailwind CSS</title>
</head>
<body class="min-h-screen bg-gray-100">
  <main class="max-w-2xl mx-auto p-8">
    <h1 class="text-3xl font-bold text-gray-900">
      Hello, Tailwind!
    </h1>
    <p class="mt-4 text-gray-600">
      순수 HTML에서 Tailwind CSS를 사용하고 있습니다.
    </p>
  </main>
</body>
</html>

빌드

CSS를 빌드합니다.

npx tailwindcss -i ./src/input.css -o ./dist/output.css

개발 중에는 --watch 옵션을 추가하면 파일 변경 시 자동으로 빌드됩니다.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

package.json 스크립트

편의를 위해 package.json에 스크립트를 추가합니다.

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

이제 npm run dev로 개발하고, npm run build로 프로덕션용 CSS를 생성할 수 있습니다.

최종 프로젝트 구조

my-project/
├── dist/
│   └── output.css
├── src/
│   └── input.css
├── index.html
├── package.json
└── tailwind.config.js

프레임워크 없이도 Tailwind CSS의 모든 기능을 사용할 수 있습니다.

Related