Tailwind CSS 사용법 v4, v4.1.7 기준 (2025년 5월 최신)

Tailwind CSS v4 완전 정복: 더 빠르고 강력해진 사용법! 🚀 (최신 버전 기준)

프론트엔드 개발의 풍경을 바꾸고 있는 Tailwind CSS가 최근 v4로 메이저 업데이트를 선보였습니다! “Utility-First(유틸리티 우선)” 철학은 그대로 유지하면서, 더 빠른 빌드 속도와 간결해진 설정으로 개발 경험을 한층 끌어올렸는데요.

Next.js 같은 프레임워크에서 설치 시 옵션으로 제공될 만큼 대세가 된 Tailwind CSS! 오늘은 최신 v4 버전을 기준으로 장점부터 설치, 핵심 사용법까지 깔끔하게 정리해 드립니다.

Tailwind CSS v4, 왜 선택해야 할까요? 🤔

사실 초보자 입장이라면 이번 업데이트에서 크게 체감될 부분은 없을겁니다.
import 해오는게 좀 더 간략해진 정도?

쌩 초보라면 아래글이 도움될 것 같습니다

Tailwind CSS 튜토리얼, 배우는 유튜브 + pdf 자료 총정리 (2025년 5월 기준)

강력한 장점:

번개처럼 빠른 빌드 속도 (v4 핵심!): 새로운 Lightning CSS 엔진 통합으로 개발 및 빌드 속도가 놀랍게 향상되었습니다.
최적화된 Bundle 사이즈: 실제로 사용된 유틸리티 클래스만 최종 CSS에 포함시켜 파일 크기가 매우 작습니다.
네이밍 고민 해방: 더 이상 CSS 클래스 이름을 짓느라 시간을 허비할 필요가 없습니다.
유연한 커스터마이징: tailwind.config.js 파일을 통해 디자인 시스템 전체를 손쉽게 맞춤 설정할 수 있습니다.

고려할 점:

HTML 코드의 복잡성: 많은 유틸리티 클래스가 HTML에 직접 적용되므로 코드가 다소 길어 보일 수 있습니다.
초기 학습 곡선: 다양한 유틸리티 클래스와 v4의 새로운 개념에 익숙해지는 데 시간이 필요할 수 있습니다.

Tailwind CSS v4 시작하기: 설치부터 설정까지 🛠️

Tailwind CLI를 사용하는 것이 가장 기본적이고 빠른 방법입니다.

패키지 설치:
프로젝트 터미널에서 다음 명령어를 실행합니다.
npm install -D tailwindcss
# 또는 yarn add -D tailwindcss
템플릿 경로 설정 (postcss.config.mjs의 content):
Tailwind가 스캔하여 유틸리티 클래스를 추출할 모든 파일 경로를 content 배열에 추가합니다.
```
/* postcss.config.mjs 파일 생성 */
export default { plugins: { "@tailwindcss/postcss": {}, }}
```
메인 CSS 파일에 @tailwind 지시어 추가:
프로젝트의 메인 CSS 파일(예: src/input.css 또는 src/globals.css)에 다음 Tailwind 지시어를 추가합니다.
```
/* 예: src/input.css */

@import "tailwindcss" /* 이제 이거 한줄이면 됩니다*/

/* v4 이전 사용방법 */
/*
@tailwind base;
@tailwind components;
@tailwind utilities; */
```
v4 이전에 사용하던 녀석들 @tailwind로 import 안 해줘도 됩니다
- @tailwind base: 브라우저 기본 스타일을 초기화하고 Tailwind의 기본 스타일을 적용합니다.
- @tailwind components: Tailwind의 컴포넌트 클래스(선택 사항)를 주입합니다.
- @tailwind utilities: Tailwind의 핵심인 유틸리티 클래스들을 주입합니다.
  팁: Next.js, Vite, Remix 등 최신 프레임워크를 사용한다면, 해당 프레임워크의 공식 Tailwind CSS 통합 가이드를 따르는 것이 더 간편할 수 있습니다. (대부분 PostCSS 설정과 함께 자동으로 처리해 줍니다.)

Tailwind CSS v4 사용법: 클래스로 마법처럼 스타일링하기 ✨

사용법은 이전 버전과 동일하게 매우 직관적입니다. HTML 요소의 className (React/JSX) 또는 class (HTML) 속성에 필요한 유틸리티 클래스를 조합하여 적용합니다.

<!-- React/JSX 예시 -->
export default function MyAwesomeCard() {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
      <div className="shrink-0">
        <img className="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
      </div>
      <div>
        <div className="text-xl font-medium text-black">ChitChat</div>
        <p className="text-slate-500">You have a new message!</p>
        <button className="mt-2 px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
          Message
        </button>
      </div>
    </div>
  );
}

p-6: 모든 방향으로 패딩 1.5rem (6 * 0.25rem)
max-w-sm: 최대 너비 small
mx-auto: 좌우 마진 auto (가운데 정렬)
bg-white rounded-xl shadow-lg: 배경 흰색, 모서리 둥글게 (xl), 큰 그림자
flex items-center space-x-4: Flexbox 레이아웃, 수직 중앙 정렬, 자식 요소 간 수평 간격
hover:bg-purple-600: 마우스 호버 시 배경색 변경
focus:ring-2: 포커스 시 링(테두리) 효과

꿀팁: 조건부/동적 클래스 적용은 `clsx`와 함께! 💡

조건에 따라 클래스를 다르게 적용해야 할 때가 많습니다. clsx (또는 classnames) 라이브러리를 사용하면 이를 매우 깔끔하게 처리할 수 있습니다.

clsx 설치:
bash npm install clsx # 또는 yarn add clsx

사용 예시 (React/JSX):

import clsx from 'clsx';

function MyButton({ isPrimary, isActive, children }) {
  const buttonClasses = clsx(
    'px-4 py-2 font-semibold rounded-md transition-colors',
    {
      'bg-blue-500 text-white hover:bg-blue-700': isPrimary,
      'bg-gray-200 text-gray-700 hover:bg-gray-300': !isPrimary,
      'ring-2 ring-offset-2 ring-blue-500': isActive,
    }
  );

  return <button className={buttonClasses}>{children}</button>;
}

clsx`는 문자열, 객체, 배열 등 다양한 형태로 클래스를 받아 최종 문자열로 조합해줍니다.

개발 생산성 UP! VS Code 확장 프로그램 🚀

Tailwind CSS 개발 경험을 극대화해주는 필수 확장 프로그램입니다.

Tailwind CSS IntelliSense (강력 추천!):
- 클래스 자동 완성, CSS 미리보기, 문법 강조, linting 등 필수 기능을 제공합니다. v4와도 완벽하게 호환됩니다.
- VS Code Marketplace – Tailwind CSS IntelliSense
- 팁: 만약 자동 완성이 제대로 동작하지 않는다면, VS Code의 settings.json에 다음을 추가해보세요:
```
"editor.quickSuggestions": {
  "strings": "on"
},
"css.validate": false, // Tailwind가 CSS를 동적으로 생성하므로 기본 CSS 유효성 검사는 꺼도 좋습니다.
"editor.inlineSuggest.enabled": true
```
Headwind (선택 사항):
- HTML class 속성 내의 Tailwind 클래스들을 자동으로 정해진 순서대로 정렬하여 코드의 일관성을 높여줍니다.
- VS Code Marketplace – Headwind

마치며

Tailwind CSS v4는 더욱 강력해진 성능과 개선된 개발 경험으로 우리 곁에 다가왔습니다. 처음에는 유틸리티 클래스의 조합이 어색할 수 있지만, 일단 익숙해지면 CSS 작성의 자유로움과 생산성 향상에 놀라게 될 것입니다.

지금 바로 Tailwind CSS v4와 함께 더 빠르고 즐거운 프론트엔드 개발 여정을 시작해보세요! 🎉

NextJS 기준이 아니라 Vanilla 쌩짜 HTMl로 만들고 싶으신분은

Tailwind CSS를 Vanilla HTML, CSS에서 함께 사용하는 방법