Tailwind CSS Standalone CLI 설치 방법 (Node.js 없이)

Tailwind CSS Standalone CLI 설치 및 사용 방법을 소개합니다. 이 방식은 Node.js 설치 없이 Tailwind CSS를 설치하고 사용하는 유용한 방법입니다.

그런데 Tailwind CSS는 왜 설치해야 하는 걸까요?

Tailwind CSS는 CDN(Content Delivery Network)을 통해 간편하게 링크하여 사용할 수도 있습니다. 하지만, 공식 문서에서는 프로덕션 환경에서는 CDN 사용을 권장하지 않습니다. 이는 최적화 및 안정성 측면에서 사용자 사이트에 직접 설치하는 방식이 더 적합하기 때문입니다.

1. Tailwind CSS 간략한 소개

Tailwind CSS는 웹 개발을 위한 CSS 프레임워크입니다. Tailwind CSS는 미리 정의된 다양한 유틸리티 클래스를 제공하여 CSS 작성을 간소화합니다. 예를 들어, text-blue-500, bg-gray-100, py-4, rounded-md 등의 클래스를 HTML 요소에 직접 추가하여 스타일을 적용할 수 있습니다. 이를 통해 CSS 파일을 직접 작성하는 대신, HTML 구조 내에서 스타일링을 직관적으로 관리할 수 있습니다.

2. Tailwind CSS Standalone CLI 다운로드

Tailwind CSS 공식 홈페이지에서는 다양한 설치 방법을 안내하고 있습니다. 이 중에서 Tailwind CSS Standalone CLI 방식은 Node.js와 npm (또는 yarn) 없이 Tailwind CSS를 사용할 수 있는 방법으로, 프론트엔드 개발 환경 구축에 어려움을 느끼는 입문자나 Node.js 를 사용하지 않는 환경에서 유용합니다.

2.1. Standalone CLI 다운로드

먼저 공식 홈페이지에서 운영체제에 맞는 Standalone CLI 실행 파일을 다운로드합니다.

– macOS

curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64 chmod +x tailwindcss-macos-x64 mv tailwindcss-macos-x64 tailwindcss

– Linux

curl -LO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 chmod +x tailwindcss-linux-x64 mv tailwindcss-linux-x64 tailwindcss

– Windows

Invoke-WebRequest -Uri https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe -OutFile tailwindcss.exe Rename-Item tailwindcss.exe tailwindcss.exe

다운로드한 실행 파일 (tailwindcss 또는 tailwindcss.exe)은 웹사이트 프로젝트의 루트 디렉토리에 위치에 두는 것이 일반적입니다.

3. Tailwind CSS Standalone CLI 빌드

3.1. input.css 파일 생성

Tailwind CSS가 스타일을 처리할 기준이 되는 input.css 파일을 생성합니다. 이 파일에는 간단하게 아래와 같이 입력합니다. 

@import "tailwindcss";

이 input.css 파일 역시 웹사이트 프로젝트의 루트 디렉토리 아래에 생성하는 것이 편리합니다.

3.2. Tailwind CSS 빌드

Tailwind CSS Standalone CLI를 사용하여 input.css 파일을 기반으로 실제 웹사이트에서 사용할 output.css 파일을 빌드합니다. 터미널 (macOS/Linux) 또는 명령 프롬프트/PowerShell (Windows)를 열고 웹사이트 프로젝트의 루트 디렉토리로 이동한 후 다음 명령어를 실행합니다.

./tailwindcss -i input.css -o output.css

(Windows의 경우 ./ 대신 . 또는 .\를 사용하거나 tailwindcss.exe로 실행해야 할 수 있습니다.)

Tailwind CSS Standalone CLI 설치 방식에 대한 공식 문서(https://tailwindcss.com/blog/standalone-cli)의 안내와 달리, Tailwind CSS 4.x 버전부터는 ./tailwindcss init 명령어가 더 이상 필요하지 않습니다. 해당 명령어는 tailwind.config.js 파일을 생성하는 역할을 했으나, Standalone CLI 방식에서는 설정 파일 없이 바로 Tailwind CSS를 사용할 수 있습니다. 따라서 공식 홈페이지의 절차를 따를 때 이 부분을 건너뛰어도 됩니다.

이 명령어는 input.css 파일을 읽어 Tailwind CSS를 처리하고, 그 결과를 output.css 파일로 저장합니다. 이때, 프로젝트 내의 HTML, JavaScript 파일 등을 분석하여 실제로 사용되는 Tailwind 클래스만 output.css에 포함시키므로 파일 크기를 최적화할 수 있습니다.

3.3. HTML에 output.css 연결

생성된 output.css 파일을 웹사이트의 HTML 파일에 <link> 태그를 사용하여 연결합니다. 기존에 CDN 방식으로 Tailwind CSS를 사용하고 있었다면 해당 <link> 태그는 제거합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 적용 예시</title>
    <link rel="stylesheet" href="./output.css">
</head>
<body>
    <div class="bg-gray-100 p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold text-blue-500 mb-4">안녕하세요, Tailwind CSS!</h1>
        <p class="text-gray-700">Standalone CLI를 통해 설치되었습니다.</p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4">클릭하세요</button>
    </div>
    <script src="./script.js"></script>
</body>
</html>

4. Tailwind CSS Standalone CLI 개발 단계 사용

웹사이트를 개발하면서 HTML이나 JavaScript 파일에서 새로운 Tailwind CSS 클래스를 사용할 경우, 해당 클래스는 아직 output.css 파일에 포함되어 있지 않습니다. 따라서 변경 사항을 반영하기 위해 Tailwind CSS를 다시 빌드해야 합니다.

./tailwindcss -i input.css -o output.css

매번 새로운 클래스를 사용할 때마다 이 명령어를 실행하는 것은 번거로울 수 있습니다.

4.1. --watch 옵션 사용

개발 편의성을 위해 --watch 옵션을 사용하여 Tailwind CSS가 파일 변경을 감지하고 자동으로 다시 빌드하도록 할 수 있습니다.

./tailwindcss -i input.css -o output.css --watch

이 명령어를 실행하면 터미널 창에서 프로세스가 종료되지 않고 계속 실행됩니다. 이제 HTML, JavaScript 파일 등에서 Tailwind CSS 클래스를 추가하거나 수정하면 자동으로 output.css 파일이 업데이트됩니다.

주의: --watch 옵션은 개발 단계에서만 사용하는 것이 일반적이며, 실제 운영 환경에서는 사용하지 않습니다.

5. Tailwind CSS Standalone CLI 프로덕션 빌드

운영 환경에 웹사이트를 배포할 때는 불필요한 클래스를 제거하고 CSS 파일을 최소화하여 로딩 속도를 최적화해야 합니다. Tailwind CSS Standalone CLI를 사용하여 프로덕션용으로 최적화된 CSS 파일을 빌드할 수 있습니다.

./tailwindcss -i input.css -o output.min.css --minify

--minify 옵션은 생성되는 output.min.css 파일의 크기를 최소화합니다. 이 파일을 HTML에 연결하여 운영 환경에 배포합니다.

6. 요약

  • Tailwind CSS 4.x 버전에서는 초기화 명령어 (./tailwindcss init) 불필요
  • Tailwind CSS Standalone CLI 파일은 프로젝트 루트 디렉토리에 위치
  • 개발 단계에서는 --watch 옵션을 활용하여 편리하게 작업
  • 프로덕션 배포 시에는 --minify 옵션을 사용하여 최적화된 CSS 파일을 생성

위로 스크롤