Bun을 이용한 Vanilla JS 프로젝트에 Tailwind CSS CDN 없이 통합하기

핵심 기술: Vanilla JavaScript 프로젝트 환경에서 Bun 패키지 매니저와 Tailwind CSS CLI를 활용하여 CDN 없이 사용자 정의 CSS 클래스를 생성하고 관리하는 방법을 안내합니다. HMR(Hot Module Replacement) 기능도 지원하여 개발 효율성을 높입니다.

기술적 세부사항:

• 패키지 설치: Bun을 사용하여 tailwindcss 및 @tailwindcss/cli를 설치합니다 (bun install tailwindcss @tailwindcss/cli).
• CSS 설정: ./src/index.css 파일을 생성하고 Tailwind의 기본 @import 및 @tailwind 지시문을 포함합니다.
  css @import "tailwindcss"; @tailwind base; @tailwind components; @tailwind utilities;
• Tailwind 설정 파일: 프로젝트 루트에 tailwind.config.js 파일을 생성하고, content 설정을 통해 HTML 및 JS 파일에서 Tailwind 클래스를 감지하도록 설정합니다.
  javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{html,js}", ], theme: { extend: {}, }, plugins: [], };
• CDN 제거: 기존에 사용하던 Tailwind CDN 링크를 index.html에서 제거합니다.
• CSS 빌드: Tailwind CLI를 사용하여 CSS를 빌드합니다. -i로 입력 파일, -o로 출력 파일을 지정하고 --watch 옵션으로 변경 사항을 감지하여 실시간으로 output.css를 업데이트합니다.
  bun run tailwindcss -i ./src/input.css -o ./src/output.css --watch
• 프로젝트 실행: Bun으로 index.html을 로컬 서버에서 실행합니다 (bun run ./index.html).
• CSS 링크 적용: index.html 파일에 빌드된 output.css 파일을 링크합니다.
  <link rel="stylesheet" href="./src/output.css">

개발 임팩트: 이 설정은 빌드 도구의 복잡성 없이 Vanilla JS 프로젝트에 Tailwind CSS의 강력한 스타일링 기능을 적용할 수 있게 해줍니다. CDN에 의존하지 않아 오프라인 개발이 용이하며, 커스텀 클래스 관리가 효율적입니다. HMR 지원으로 개발 생산성이 향상됩니다.

커뮤니티 반응: (제공된 내용에 포함되지 않음)