Tailwind CSS v4 완전 정복: 더 빠르고 강력해진 사용법! 🚀 (최신 버전 기준)
프론트엔드 개발의 풍경을 바꾸고 있는 Tailwind CSS가 최근 v4로 메이저 업데이트를 선보였습니다! “Utility-First(유틸리티 우선)” 철학은 그대로 유지하면서, 더 빠른 빌드 속도와 간결해진 설정으로 개발 경험을 한층 끌어올렸는데요.
Next.js 같은 프레임워크에서 설치 시 옵션으로 제공될 만큼 대세가 된 Tailwind CSS! 오늘은 최신 v4 버전을 기준으로 장점부터 설치, 핵심 사용법까지 깔끔하게 정리해 드립니다.
Tailwind CSS v4, 왜 선택해야 할까요? 🤔
사실 초보자 입장이라면 이번 업데이트에서 크게 체감될 부분은 없을겁니다.
import 해오는게 좀 더 간략해진 정도?
쌩 초보라면 아래글이 도움될 것 같습니다
강력한 장점:
- 번개처럼 빠른 빌드 속도 (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
: 최대 너비 smallmx-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
- HTML
마치며
Tailwind CSS v4는 더욱 강력해진 성능과 개선된 개발 경험으로 우리 곁에 다가왔습니다. 처음에는 유틸리티 클래스의 조합이 어색할 수 있지만, 일단 익숙해지면 CSS 작성의 자유로움과 생산성 향상에 놀라게 될 것입니다.
지금 바로 Tailwind CSS v4와 함께 더 빠르고 즐거운 프론트엔드 개발 여정을 시작해보세요! 🎉
NextJS 기준이 아니라 Vanilla 쌩짜 HTMl로 만들고 싶으신분은