[Tailwind] 윈도우 환경에서 테일윈드 CSS 로컬 개발 시작하기 가이드 (Node.js 설치 포함)

Tailwind CSS는 유틸리티 클래스 기반으로 구성된 CSS 프레임워크이다.

HTML에 클래스를 직접 작성하여 빠르게 디자인을 구현할 수 있어, 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다.

이 글에서는 윈도우 환경에서 Tailwind CSS를 로컬에서 개발하기 위한 전체 셋업 과정을 설명한다.

---

🧱 0단계: Node.js 설치

Tailwind CSS를 로컬에서 빌드하려면 먼저 Node.js가 설치되어 있어야 한다.

✔ 설치 방법

1. Node.js 공식 웹사이트에 접속한다.
2. 추천되는 LTS(Long Term Support) 버전을 다운로드한다.
3. 설치 마법사에 따라 기본 옵션으로 설치를 진행한다.
4. 설치가 완료되면, 터미널 또는 명령 프롬프트에서 아래 명령어로 확인한다.

node -v
npm -v

Node와 함께 npm도 자동으로 설치된다. 위 명령어로 버전이 출력된다면 설치가 정상적으로 완료된 것이다.

---

📁 1단계: 프로젝트 폴더 초기화

개발할 폴더를 생성하고 Node 프로젝트를 초기화한다.

mkdir tailwind-win
cd tailwind-win
npm init -y

 

• mkdir tailwind-win : 새 폴더를 생성한다.
• cd tailwind-win : 생성한 폴더로 이동한다.
• npm init -y : 기본값으로 package.json 파일을 생성한다.

---

📦 2단계: Tailwind CSS 패키지 설치 및 설정

Tailwind와 PostCSS 관련 패키지를 설치하고 설정 파일을 생성한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• npm install -D ... : 해당 패키지들을 개발 의존성으로 설치한다.
• npx tailwindcss init -p : tailwind.config.js와 postcss.config.js를 동시에 생성한다.

---

⚙️ 3단계: Tailwind CSS 적용용 CSS 작성

src/styles.css 파일을 생성하고 Tailwind 핵심 지시어를 작성한다.

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

 

이 코드들은 Tailwind에서 제공하는 기본 스타일, 컴포넌트, 유틸리티 클래스를 로딩하기 위한 지시어이다.

---

🛠️ 4단계: 설정 파일 수정

tailwind.config.js에서 Tailwind가 HTML 및 JS 파일을 감지할 수 있도록 경로를 지정한다.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

---

🔧 5단계: 빌드 스크립트 작성 및 실행

package.json의 scripts 항목에 아래 명령어를 추가한다.

• -i  : 입력 파일 경로이다.
• -o : 출력 파일 경로이다.
• --watch : 파일 변경을 실시간으로 감지하여 자동으로 CSS를 다시 생성한다.

• 명령어 실행은 아래처럼 한다.

npm run build

 

이 명령은 Tailwind CSS를 기반으로 최적화된 스타일 파일을 생성하고 실시간으로 갱신한다.

---

🌐 6단계: HTML에서 Tailwind CSS 연결

HTML 파일을 생성하고 output.css를 링크한다.

<link href="./dist/output.css" rel="stylesheet">

 

이제 Tailwind 클래스를 자유롭게 사용할 수 있다.

예시는 다음과 같다.

<div class="bg-indigo-500 text-white p-4 rounded shadow">
  Tailwind로 스타일링된 박스이다.
</div>

---

🔌 7단계: VSCode 플러그인 추천

플러그인 이름	기능
Tailwind CSS IntelliSense	클래스 자동완성 및 설명 표시
Headwind	클래스 정렬 자동화
Live Server	브라우저 실시간 미리보기 제공
Prettier	코드 정렬 및 스타일링 자동화

위 플러그인들은 개발 효율을 극대화하는 데 도움이 된다.