Tailwind CSS v4를 사용하여 순수하게 CSS 파일만 빌드(컴파일)하기 위해, Node.js 설치부터 최종 CSS 생성까지의 전체 과정을 안내합니다.

# tailwindcss

Tailwind CSS v4를 사용하여 순수하게 CSS 파일만 빌드(컴파일)하기 위해, Node.js 설치부터 최종 CSS 생성까지의 전체 과정을 안내합니다.

---

## 🟢 1단계: Node.js 설치하기

Tailwind CLI를 실행하려면 컴퓨터에 Node.js 환경이 반드시 구축되어 있어야 합니다.

1. Node.js 공식 홈페이지에 접속합니다.
2. LTS(Long Term Support) 버전을 다운로드하여 설치합니다. (안정성 보장)
3. 설치가 완료되면 터미널(명령 프롬프트 또는 PowerShell)을 열고 아래 명령어를 입력해 정상 설치를 확인합니다.

```bash
node -v
npm -v
```

버전 숫자가 정상적으로 출력되면 성공입니다.

📂 2단계: 프로젝트 폴더 생성 및 초기화작업할 디렉토리를 만들고 Node.js 프로젝트로 초기화합니다.

```bash
# 1. 원하는 이름으로 새 폴더 생성 및 이동
mkdir tailwind-project
cd tailwind-project

# 2. package.json 파일 생성 (프로젝트 초기화)
npm init -y
```

### 📥 3단계: Tailwind v4 및 플러그인 진짜 설치하기 (핵심 ⭐️)

Tailwind v4 공식 CLI 도구를 개발 의존성 패키지로 설치합니다.

```bash
pnpm add -D tailwindcss @tailwindcss/postcss @tailwindcss/forms @tailwindcss/typography

#https://daisyui.com/
pnpm i -D daisyui@latest

# build
pnpm add -D @tailwindcss/cli
```

### 🎨 4단계: 소스 파일 및 스타일시트 작성

테일윈드 코드를 입력할 입력용(Input) CSS 파일과 테스트용 HTML 파일을 만듭니다.

1. 입력용 CSS 파일 생성프로젝트 루트에 src 폴더를 만들고 그 안에 input.css 파일을 생성합니다.

* 경로: src/input.css
* 내용: v4에서는 아래 한 줄만 입력하면 끝납니다. (@tailwind 문법이 아닌 @import를 사용합니다.)

```css
#input.css
/* 기본 테마와 모든 유틸리티 클래스를 '통째로' 강제 포함시키는 주소 */
@import "tailwindcss" source(none);

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

@plugin "daisyui";
```

2. 테스트용 HTML 파일 생성테일윈드 클래스가 정상적으로 작동하는지 확인하기 위해 루트에 index.html 파일을 만듭니다.

* 경로: index.html
* 내용: 최종적으로 빌드되어 나올 dist/output.css를 불러오도록 링크합니다.

```html



  
  
  
  
  


  

    Tailwind CSS v4가 정상 작동합니다!
  


```

### 🚀 5단계: Tailwind CSS 빌드 및 생성

이제 CLI 컴파일러를 실행하여 HTML 파일 내 클래스를 분석하고 최종 CSS 파일을 자동 생성합니다.터미널에 아래 명령어를 입력합니다:

```bash
pnpm dlx tailwindcss -i ./input.css -o ./static/css/output.css --watch

pnpm approve-builds

pnpm dlx @tailwindcss/cli -i .input.css -o ./static/css/output.css --minify
```

* -i: 입력할 원본 CSS 파일 경로입니다.
* -o: 컴파일되어 새로 생성될 결과물 CSS 파일 경로입니다. (dist/output.css 폴더와 파일이 자동 생성됨)
* --watch: 터미널을 켜두면 HTML이나 CSS 파일을 수정하고 저장할 때마다 실시간으로 CSS를 자동 갱신합니다.

```bash
# reset
rm -rf node_modules
pnpm install
```

### 💡 팁: 명령어 단축키 만들기 (package.json)

매번 긴 빌드 명령어를 입력하기 번거로우므로, package.json 파일의 scripts 항목에 등록해두면 편리합니다.

package.json 파일을 열어 아래와 같이 수정합니다:

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

이제 터미널에서 간단히 아래 명령어로 실행할 수 있습니다:실시간 개발 모드:

```bash
# 배포용으로 압축 통짜 파일 뽑을 때
pnpm build

# 개발 중에 실시간 감시 모드 켤 때
pnpm watch
```

---

```json
#package.json
{
  "name": "my-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./src/css/layout.css -o ./static/css/output.css --minify",
    "watch": "tailwindcss -i ./src/css/layout.css -o ./static/css/output.css --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devEngines": {
    "packageManager": {
      "name": "pnpm",
      "version": "^11.7.0",
      "onFail": "download"
    }
  },
  "type": "module",
  "devDependencies": {
    "@tailwindcss/cli": "^4.3.2",
    "@tailwindcss/forms": "^0.5.11",
    "@tailwindcss/postcss": "^4.3.2",
    "@tailwindcss/typography": "^0.5.20",
    "daisyui": "^5.6.13",
    "tailwindcss": "^4.3.2"
  }
}
```