독립형 CLI: Node.js 없이 Tailwind CSS 사용하기

Tailwind CSS는 자바스크립트로 작성되었으며 npm 패키지로 배포됩니다. 이는 항상 Node.js와 npm이 설치되어 있어야 사용할 수 있다는 것을 의미합니다.

이로 인해 npm을 항상 사용하지 않는 프로젝트에 통합하기가 더 어려워졌습니다. Rails와 Phoenix와 같은 도구들이 기본적으로 npm을 사용하지 않는 방향으로 전환하면서, 우리는 이러한 프로젝트에서 Tailwind를 사용할 수 있는 방법을 찾아야 했습니다. 이를 위해 완전히 별도의 도구 생태계를 도입하지 않고도 사용할 수 있는 방법이 필요했습니다.

오늘 우리는 Node.js나 npm 없이도 Tailwind CLI의 모든 기능을 사용할 수 있는 독립형 CLI 빌드를 발표합니다.

​시작하기

설치하려면 GitHub의 최신 릴리스에서 여러분의 플랫폼에 맞는 실행 파일을 다운로드하고, 실행 권한을 부여하세요:

# macOS arm64 예제
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

이제 npm으로 배포된 CLI 도구와 동일하게 사용할 수 있습니다:

# tailwind.config.js 파일 생성
./tailwindcss init

# 파일 변경 감지 시작
./tailwindcss -i input.css -o output.css --watch

# 프로덕션을 위해 CSS 컴파일 및 최소화
./tailwindcss -i input.css -o output.css --minify

모든 퍼스트파티 플러그인의 최신 버전도 함께 번들로 제공되므로, 프로젝트에서 사용하려면 Node 기반 프로젝트에서와 마찬가지로 tailwind.config.js 파일에서 require로 불러오면 됩니다:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ]
}

여러분은 npm으로 배포된 표준 CLI의 모든 기능을 종속성 없이 편리하고 휴대 가능한 패키지로 사용할 수 있습니다.

​어떻게 동작하나요?

우리는 Tailwind를 Rust로 다시 작성하지 않았습니다 (아직은…). 대신 Vercel의 멋진 프로젝트인 pkg를 사용하고 있습니다. 이 프로젝트는 Node.js 프로젝트를 실행 파일로 변환할 수 있게 해줍니다. 이 실행 파일은 Node.js를 설치하지 않고도 실행할 수 있으며, 프로젝트에 필요한 모든 부분을 실행 파일 자체에 포함시킵니다.

이 덕분에 여러분은 JSON 같은 정적 형식 대신 JavaScript의 모든 기능을 활용할 수 있는 tailwind.config.js 파일을 계속 사용할 수 있습니다.

​어떤 CLI를 사용해야 할까요?

여러분의 프로젝트에서 이미 npm을 사용하고 있다면, 우리가 항상 제공해 온 npm으로 배포된 CLI 버전을 사용하세요. 업데이트가 더 간단하고 파일 크기도 작으며, 이미 해당 생태계에 속해 있기 때문에 독립 실행형 빌드를 사용할 아무런 이점이 없습니다.

반대로, Node.js나 npm이 필요하지 않은 프로젝트를 작업 중이라면 독립 실행형 빌드가 훌륭한 선택이 될 수 있습니다. Tailwind가 package.json 파일을 갖는 유일한 이유였다면, 이 방법이 더 나은 해결책으로 느껴질 것입니다.