Tailwind CSS란 무엇인가?
Utility-First CSS의 혁명
과거에는 HTML에 class="chat-notification"이라고 이름을 짓고 별도의 CSS 파일에서 모든 스타일을 정의했습니다. Tailwind CSS는 이 방식을 완전히 뒤집어, flex, pt-4, text-center, bg-blue-500 같은 미리 정의된 유틸리티 클래스를 HTML에 직접 조합하여 빠르게 UI를 구축하는 최신 웹 표준 프레임워크입니다.
💡 패러다임 전환: "클래스 이름 짓기"의 고통에서 해방되다
과거에는 의미론적(Semantic)인 클래스명을 지어야 한다는 강박 때문에 .sidebar-inner-wrapper 같은 복잡한 이름을 지어냈습니다. Tailwind는 이러한 고민을 제거하고 시각적 결과에만 집중하도록 돕습니다.
| 비교 항목 | 기존 CSS 방식 | Tailwind CSS 방식 |
|---|---|---|
| 작업 흐름 | HTML 작성 ➔ CSS 파일 이동 ➔ 이름 짓기 ➔ 속성 작성 | HTML 내에서 즉시 클래스로 디자인 완성 |
| 파일 크기 | 코드가 쌓일수록 무한히 늘어남 (사용 안 하는 코드 방치) | 사용한 클래스만 추출되어 항상 10KB 내외 유지 |
| 유지 보수 | "이 클래스를 지우면 어디가 망가질까?" 두려움 | HTML 요소와 스타일이 1:1 결합되어 안전하게 삭제 가능 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Tailwind CSS 첫 경험</title>
<!-- Tailwind CSS를 체험하기 위한 CDN 포함 (실무에서는 CLI 빌드 사용) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 사용자 지정 설정 추가 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: { brand: '#0ea5e9' }
}
}
}
</script>
</head>
<body class="bg-slate-900 h-screen flex items-center justify-center p-4">
<!--
Tailwind 클래스 분석:
- max-w-sm: 최대 너비를 스마트폰 크기(384px)로 제한
- mx-auto: 가로 중앙 정렬 (margin-left: auto, margin-right: auto)
- bg-slate-800: 다크 테마 배경색 지정
- rounded-2xl: 모서리를 둥글게 (1rem)
- shadow-xl: 깊은 그림자 추가
- border, border-slate-700: 미세한 윤곽선
-->
<div class="max-w-sm mx-auto bg-slate-800 rounded-2xl shadow-xl overflow-hidden border border-slate-700 hover:scale-105 transition-transform duration-300">
<img class="w-full h-48 object-cover opacity-80 hover:opacity-100 transition-opacity" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Tech Setup">
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold text-brand tracking-widest uppercase">Technology</span>
<span class="text-xs text-slate-400">May 19, 2026</span>
</div>
<h2 class="text-xl font-bold text-white mb-3">Utility-First CSS의 힘</h2>
<p class="text-slate-400 text-sm leading-relaxed mb-6">
이 멋진 UI 컴포넌트는 단 한 줄의 커스텀 CSS 작성 없이, 순수하게 HTML 클래스만으로 완성되었습니다. 브라우저에서 버튼을 클릭해보세요!
</p>
<button onclick="console.log('환영합니다! Tailwind의 세계로 오신 것을 환영합니다.')" class="w-full bg-brand hover:bg-sky-400 text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-sky-500/30 transition-colors duration-200">
시작하기
</button>
</div>
</div>
</body>
</html>크기와 여백 (Sizing & Spacing)
직관적인 크기와 여백의 절대 수치 규칙
Tailwind CSS의 스페이싱 시스템은 매우 과학적입니다. 여백(Padding, Margin)과 크기(Width, Height)에 사용되는 숫자는 임의의 픽셀이 아니라 4px 단위(0.25rem)로 설계되어 기하학적인 그리드 정렬을 완벽하게 맞춥니다. 예컨대, p-4는 4 * 4px = 16px (1rem)을 정확히 출력합니다.
⚠️ 주의: w-full vs w-screen의 차이점
화면 가득 채우기 위해 w-screen을 남용할 경우, 일부 OS 브라우저에서 생기는 물리 세로 스크롤바의 너비(약 15px)를 무시하고 뷰포트 전체를 차지하여 불필요한 가로 스크롤바가 생성됩니다. 일반적인 레이아웃 영역에서는 부모 영역에 맞게 늘어나는 w-full을 사용하는 것이 모범사례입니다.
| 클래스 접두사 | 동작 매커니즘 | 단위 환산 (1단위 = 4px = 0.25rem) | 실전 예시 |
|---|---|---|---|
| p- (Padding) | 요소 안쪽 여백 설정 | p-4 ➔ 16px (1rem)py-2 ➔ 위아래 8pxpx-6 ➔ 좌우 24px |
p-4 bg-white text-black |
| m- (Margin) | 요소 바깥쪽 여백 설정 | m-8 ➔ 32px (2rem)mt-10 ➔ 위쪽 40pxmx-auto ➔ 가로 중앙 정렬 |
mx-auto max-w-md |
| w- (Width) | 가로 너비 지정 | w-64 ➔ 256px (16rem)w-full ➔ 100%w-1/2 ➔ 50% 비율 |
w-full md:w-1/3 |
| h- (Height) | 세로 높이 지정 | h-12 ➔ 48px (3rem)h-screen ➔ 100vhh-min ➔ 콘텐츠 최소 높이 |
h-screen flex items-center |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Sizing & Spacing Interactive</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center font-sans">
<div class="max-w-xl w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4">
<h2 class="text-2xl font-extrabold text-white">Spacing Playground</h2>
<p class="text-sm text-slate-400 mt-1">버튼을 눌러 안쪽 패딩(Padding) 크기를 실시간으로 변경해 보세요!</p>
</div>
<!-- Playground Target Box -->
<div class="bg-slate-950 rounded-xl p-4 flex justify-center items-center min-h-[160px]">
<div id="interactive-box" class="bg-emerald-500 text-white font-extrabold text-center rounded-lg shadow-lg shadow-emerald-500/20 transition-all duration-300 w-full max-w-[200px]">
Content Box
</div>
</div>
<!-- Controller Buttons -->
<div class="grid grid-cols-4 gap-2">
<button onclick="changeSpacing('p-2')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-3 rounded-lg text-sm transition-colors">
p-2 (8px)
</button>
<button onclick="changeSpacing('p-4')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-3 rounded-lg text-sm transition-colors">
p-4 (16px)
</button>
<button onclick="changeSpacing('p-8')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-3 rounded-lg text-sm transition-colors">
p-8 (32px)
</button>
<button onclick="changeSpacing('p-12')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-3 rounded-lg text-sm transition-colors shadow-lg shadow-indigo-600/30">
p-12 (48px)
</button>
</div>
</div>
</body>
</html>색상과 타이포그래피
색상 시스템과 완벽한 타이포그래피의 결합
Tailwind CSS의 가장 큰 장점 중 하나는 디자이너가 설계한 22가지 색상 팔레트와 비례적인 타이포그래피 스케일이 내장되어 있다는 점입니다. 텍스트 크기(Size)를 키우면 자동으로 최적의 줄간격(Line Height)이 계산되어 적용되며, 자간(Tracking)과 굵기(Weight)를 조합해 세련된 UI 타이포그래피를 즉시 구축할 수 있습니다.
⚠️ 주의: 임의의 값 사용 지양 (Arbitrary values)
가급적 text-[#ff0000] 이나 text-[17px] 처럼 대괄호를 이용한 커스텀 값 사용을 피하세요. 디자인 시스템의 일관성을 해치고 Tailwind의 가장 큰 장점인 '사전 정의된 스케일'을 파괴합니다. 꼭 필요한 테마 컬러/크기는 tailwind.config.js에 등록하여 사용하는 것이 원칙입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Tailwind 색상 및 타이포그래피 마스터</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 font-sans text-slate-200 transition-colors duration-500" id="main-body">
<div class="max-w-3xl mx-auto space-y-12">
<!-- Header: Typography Mastery -->
<div class="text-center space-y-4">
<p class="text-emerald-400 font-bold tracking-widest uppercase text-sm">Design System</p>
<!-- text-5xl (초대형 크기), font-extrabold (아주 굵게), tracking-tight (자간 좁게) -->
<h1 class="text-5xl font-extrabold tracking-tight">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500">
Typography & Colors
</span>
</h1>
<!-- text-lg (약간 큰 폰트), text-slate-400 (색상), leading-relaxed (넓은 줄간격) -->
<p class="text-lg text-slate-400 font-medium max-w-xl mx-auto leading-relaxed" id="description-text">
디자이너 없이도 아름다운 UI를 만드세요. 자간(tracking)과 줄간격(leading), 명도 척도(50~950)를 완벽하게 조합하는 방법을 배웁니다.
</p>
</div>
<!-- UI Component: Typography Article Card -->
<div class="bg-slate-800/80 backdrop-blur-md border border-slate-700/50 rounded-2xl p-8 shadow-2xl relative overflow-hidden group">
<!-- Decorative background blur -->
<div id="glow-effect" class="absolute -top-20 -right-20 w-64 h-64 bg-teal-500/10 rounded-full blur-3xl transition-colors duration-700"></div>
<div class="relative z-10">
<!-- Article Header -->
<div class="mb-8 border-b border-slate-700/50 pb-6">
<!-- text-3xl, font-bold, text-white -->
<h2 id="card-title" class="text-3xl font-bold text-white mb-2 tracking-tight">
완벽하게 설계된 타이포그래피
</h2>
<!-- text-sm, text-slate-400, font-mono (모노스페이스 글꼴) -->
<p class="text-sm text-slate-400 font-mono tracking-wide uppercase">
Tailwind Default Scale
</p>
</div>
<!-- Article Body -->
<div class="space-y-6">
<p class="text-base text-slate-300 leading-loose">
단락(Paragraph) 텍스트를 작성할 때는 <code class="text-teal-400 bg-teal-400/10 px-2 py-1 rounded">leading-loose</code>(아주 넓은 줄간격)나
<code class="text-teal-400 bg-teal-400/10 px-2 py-1 rounded">leading-relaxed</code>를 사용하면 가독성이 비약적으로 상승합니다.
너무 촘촘한 글씨는 사용자를 지치게 만듭니다.
</p>
<blockquote class="border-l-4 border-teal-500 pl-4 py-2 italic text-slate-400">
"좋은 디자인의 90%는 타이포그래피에 의해 결정된다." <br>
<span class="text-sm font-semibold not-italic text-slate-500 mt-2 inline-block">— Oliver Reichenstein</span>
</blockquote>
</div>
<!-- Theme Switcher Buttons -->
<div class="mt-10 flex gap-4">
<button onclick="changeTheme('default')" class="flex-1 bg-slate-700 hover:bg-slate-600 text-white font-semibold py-3 px-4 rounded-xl shadow border border-slate-600 transition-all">
디폴트 테마
</button>
<button onclick="changeTheme('vibrant')" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold tracking-wide py-3 px-4 rounded-xl shadow-lg shadow-indigo-600/30 border border-indigo-500 transition-all">
바이올렛 강조
</button>
</div>
</div>
</div>
</div>
</body>
</html>Flexbox로 자유자재 배치하기
1차원 배치의 종결자, Flexbox 시스템
더 이상 float나 inline-block의 마진 병합 문제로 고통받지 마세요. Tailwind CSS는 부모 컨테이너에 flex 클래스 단 한 개를 추가하는 것만으로 자식 요소들을 행(Row) 또는 열(Column)로 유려하게 직렬 정렬하며, 주축과 교차축의 모든 축 정렬을 완벽히 제공합니다.
💡 실무 팁: flex-1 vs flex-auto vs shrink-0
자식 요소가 부모 너비를 유연하게 채워야 하는 메인 본문엔 flex-1을 적용하고, 아이콘이나 이미지같이 절대 찌그러지면 안 되는 고정 크기 요소에는 반드시 shrink-0을 적용하세요. flex 레이아웃 안의 아이콘이 쪼그라드는 고질적 현상을 1초 만에 수정할 수 있습니다.
| 속성 종류 | Tailwind 클래스 | CSS 물리 원리 | 적용 시각 효과 |
|---|---|---|---|
| 방향 설정 | flex-rowflex-col |
flex-direction: row;flex-direction: column; |
가로 직렬 정렬 세로 일렬 정렬 |
| 주축 정렬 | justify-centerjustify-between |
justify-content: center;justify-content: space-between; |
가로 중앙 밀착 양쪽 끝 배치 후 자동 마진 |
| 교차축 정렬 | items-centeritems-stretch |
align-items: center;align-items: stretch; |
세로 기준 정중앙 정렬 부모 높이에 맞춰 길게 늘임 |
| 간격 조율 | gap-4gap-x-6 |
gap: 1rem;column-gap: 1.5rem; |
자식 간의 물리적 간격(16px) 좌우 자식 간격(24px) 지정 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flexbox Interactive Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center">
<div class="max-w-2xl w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4">
<h2 class="text-2xl font-extrabold text-white">Flexbox Align Playground</h2>
<p class="text-sm text-slate-400 mt-1">주축 정렬(Justify-Content) 옵션을 클릭하여 자식 카드의 배치를 조절해보세요!</p>
</div>
<!-- Interactive Container -->
<div id="flex-container" class="bg-slate-950 rounded-xl p-4 min-h-[160px] flex items-center gap-4 transition-all duration-300">
<div class="w-16 h-16 bg-blue-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">1</div>
<div class="w-16 h-16 bg-pink-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">2</div>
<div class="w-16 h-16 bg-indigo-500 rounded-xl flex items-center justify-center font-black text-xl text-white shadow-lg">3</div>
</div>
<!-- Controls -->
<div class="grid grid-cols-3 gap-2">
<button onclick="alignFlex('justify-start')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
justify-start
</button>
<button onclick="alignFlex('justify-center')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
justify-center
</button>
<button onclick="alignFlex('justify-between')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg text-sm transition-all shadow-md shadow-indigo-600/20">
justify-between
</button>
</div>
</div>
</body>
</html>CSS Grid로 바둑판 배열 만들기
2차원 그리드 레이아웃의 끝판왕
대시보드 위젯, 이미지 갤러리처럼 가로와 세로(2차원) 차원을 바둑판 모양으로 통제하여 지능적인 분할 정렬을 배치할 때 Grid는 필수입니다. Tailwind의 grid와 grid-cols-N은 복잡한 CSS Grid 문법을 간단한 유틸리티 선언 하나로 해소해 줍니다.
💡 실무 지침: gap-4 유틸리티 권장
자식 요소들끼리 떼어놓기 위해 일일이 margin-right 나 margin-bottom을 부여하지 마세요. 부모 컨테이너에 gap-4(16px), gap-6(24px) 처럼 간격 유틸리티를 부여하면 복잡한 반응형 상황에서도 마진 겹침 현상 없이 깔끔하게 여백 정렬이 정합됩니다.
| 클래스 규칙 | 지정된 역할 | 대표적인 사용 예시 |
|---|---|---|
grid-cols-{N} |
바둑판 가로 열의 개수 분할 | grid-cols-2 (반반 분할), grid-cols-4 (4분할) |
col-span-{N} |
해당 아이템이 독점할 칸 개수 지정 | col-span-2 (2개 열의 너비를 병합하여 합침) |
row-span-{N} |
해당 아이템이 세로로 독점할 줄 수 지정 | row-span-2 (상하 2칸의 세로 공간 합침) |
gap-{N} |
그리드 아이템 전체 상하좌우 사이 간격 설정 | gap-4 (16px), gap-x-8 (좌우만 32px 간격) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS Grid Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center">
<div class="max-w-3xl w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4">
<h2 class="text-2xl font-extrabold text-white">Dynamic Grid Playground</h2>
<p class="text-sm text-slate-400 mt-1">버튼을 클릭하여 가로 칸(Column) 분할 구조를 실시간 스위칭해 보세요!</p>
</div>
<!-- Grid Box Container -->
<div id="grid-container" class="grid grid-cols-2 gap-4 bg-slate-950 p-6 rounded-xl transition-all duration-500">
<div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 1</div>
<div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 2</div>
<div class="bg-teal-500 text-white font-bold h-20 rounded-xl col-span-2 flex items-center justify-center shadow-lg border border-teal-400/30">
Card 3 (col-span-2)
</div>
<div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 4</div>
<div class="bg-emerald-500 text-white font-bold h-20 rounded-xl flex items-center justify-center shadow-lg">Card 5</div>
</div>
<!-- Control Buttons -->
<div class="flex gap-4">
<button onclick="changeGrid(2)" class="flex-1 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg text-sm transition-all">
2 Columns (grid-cols-2)
</button>
<button onclick="changeGrid(3)" class="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 rounded-lg text-sm transition-all shadow-md shadow-indigo-600/30">
3 Columns (grid-cols-3)
</button>
</div>
</div>
</body>
</html>포지션과 Z-인덱스
요소를 공중에 띄우고 다층 레이어로 쌓기
알림 배지(Badge), 드롭다운(Dropdown), 모달 팝업처럼 기존의 배치 흐름을 파괴하고 요소를 겹치게 하거나 공중에 띄울 때는 포지션과 Z-인덱스가 필수입니다. Tailwind는 relative, absolute 등의 포지셔닝 속성과 Z-인덱스를 조합하는 깔끔한 해결책을 제시합니다.
⚠️ 절대 포지션 적용 시의 대형 사고 방지 가이드
자식에게 absolute를 주고 붕 띄웠다면, 반드시 부모 컨테이너에 relative 클래스가 적혀있는지 1초만 체크해 보세요. 부모에 relative가 누락되면, 해당 자식은 전체 브라우저 body를 기준으로 공간 좌표를 잡기 때문에 모니터 밖 구석 엉뚱한 곳으로 날아가는 대참사가 납니다!
| 유틸리티 클래스 | 레이아웃 해석 규칙 | 주요 적용 용도 |
|---|---|---|
relative |
문서 흐름을 유지하되, 절대 배치 자식의 중심 기준점 역할 수행 | 모든 절대 정렬(absolute)의 바깥 부모 카드 필수 적용 |
absolute |
기존 공간을 차지하지 않고 붕 뜨며, relative 부모 기준 좌표 이동 | 알림 뱃지, 카드 위 닫기 단추, 마우스 호버 오버레이 |
fixed |
부모와 무관하게 무조건 '브라우저 창(Viewport)' 기준으로 절대 고정 | 글로벌 내비게이션 바(GNB), 우측 하단 챗봇 상담 둥근 버튼 |
sticky |
평소엔 흐름을 따르다가 스크롤이 임계 영역에 닿으면 고정 | 상세 스크롤 시 화면에 달라붙는 아티클 목차(Table of Contents) |
z-{index} |
Z-축 높이 적층 순서 지정 (0, 10, 20, 30, 40, 50) | 팝업창 모달(z-50)이 기존 컴포넌트(z-10)를 완전히 덮도록 보정 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Stacking Layers Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex items-center justify-center">
<div class="max-w-md w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl relative">
<span class="absolute -top-3 -right-3 flex h-8 w-8">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-8 w-8 bg-red-500 text-white font-bold text-xs items-center justify-center shadow-lg border border-slate-800">
3
</span>
</span>
<div class="space-y-4">
<h2 class="text-2xl font-black text-white">Interactive Badge UI</h2>
<p class="text-sm text-slate-400">
우측 상단에 떠있는 붉은 알림 뱃지는 <code>absolute -top-3 -right-3</code>으로 부착되었습니다. 아래 버튼으로 뱃지의 표시 상태를 제어해보세요.
</p>
<button onclick="toggleBadge()" class="w-full bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-indigo-600/30">
알림 가리기/보이기 토글
</button>
</div>
</div>
</body>
</html>상태 변형 (Hover, Focus, Active)
생동감 있는 인터랙티브 가상 선택자
웹사이트는 사용자의 동작에 실시간 반응하여 살아있음을 느껴야 합니다. Tailwind CSS는 CSS의 가상 클래스(Pseudo-classes)를 hover:bg-blue-600, focus:ring-2 처럼 클래스 접두사(Prefix) 형태로 즉시 적용할 수 있게 획기적인 상태 제어 문법을 제공합니다.
💡 키보드 접근성 팁: focus:ring 필수 권장
마우스 호버만 신경 쓰고 포커스 링을 누락하면 키보드 Tab 키로 탐색하는 장애인/전문가 사용자들의 웹 접근성이 훼손됩니다. focus:outline-none으로 지저분한 아웃라인을 지웠다면, 반드시 세련된 focus:ring-2 focus:ring-indigo-500/50 처럼 투명 링 그림자 링을 활성화하는 것이 프로 웹 퍼블리셔의 기본 덕목입니다.
| 가상 클래스 접두사 | 동작 조건 | 실전 유스케이스 예시 |
|---|---|---|
hover: |
마우스 포인터가 요소 위에 위치할 때 | hover:bg-slate-700 hover:scale-105 |
focus: |
입력란(Input) 선택 및 키보드 Tab 키 포커스 시 | focus:ring-2 focus:ring-indigo-500/50 |
active: |
마우스 클릭 및 모바일 터치 압력이 일어나는 동안 | active:scale-95 active:bg-indigo-700 |
disabled: |
폼 요소가 비활성화(disabled) 상태일 때 | disabled:opacity-50 disabled:cursor-not-allowed |
group-hover: |
부모 카드에 호버 시 내부 자식 텍스트를 연동해 바꿀 때 | 부모 카드에 group 선언 ➔ 자식 글씨에 group-hover:text-indigo-400 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Interactive States Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex flex-col items-center justify-center font-sans">
<div class="max-w-md w-full bg-slate-800 rounded-2xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4">
<h2 class="text-2xl font-extrabold text-white">Variants Playground</h2>
<p class="text-sm text-slate-400 mt-1">버튼에 마우스를 올리고 클릭(Active)하여 상태 반응을 확인하세요!</p>
</div>
<!-- Active Button with Neon Effects -->
<div class="flex flex-col items-center gap-4 py-4 bg-slate-950 rounded-xl">
<button onclick="console.log('💥 성공적으로 제출되었습니다.')" class="bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white font-bold py-3 px-8 rounded-xl transition-all duration-200 shadow-lg shadow-indigo-600/30 hover:shadow-indigo-500/50">
제출하기
</button>
<!-- Focus Form Input -->
<input type="text" placeholder="여기를 클릭하여 Focus해보세요..." class="w-64 px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg outline-none text-white focus:ring-4 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all text-sm placeholder-slate-500" />
</div>
</div>
</body>
</html>모바일 우선 반응형 디자인
반응형 디자인 혁명, 미디어 쿼리가 사라지다
화면 크기마다 CSS 파일을 새로 작성하던 고단한 시대는 끝났습니다. Tailwind CSS는 모바일 우선(Mobile-First) 아키텍처를 채택하여, 기본적으로 정의된 클래스는 모바일에 적용되고, sm:, md:, lg: 등의 접두사 단어로 스마트폰, 태블릿, PC 해상도를 한 줄에 통제합니다.
⚠️ 주의: Mobile-First 아키텍처 작성 방향
처음부터 lg:w-1/2만 단독으로 쓰지 마세요. Tailwind는 모바일 우선이므로 기본 너비를 지정하지 않으면 100%가 되며, md:w-1/2, lg:w-1/3 형태로 화면이 점진적으로 커지는 순서로 조립해야 디자이너의 레이아웃이 깨지지 않습니다.
| 중단점 접두사 | 최소 가로 너비 (Minimum Width) | 대체 타겟 기기군 |
|---|---|---|
| (Default) | 0px ~ 639px | 일반 모든 스마트폰 세로 뷰포트 |
sm: |
640px 이상 | 대형 스마트폰 가로 뷰포트 |
md: |
768px 이상 | 아이패드, 갤럭시탭 등 태블릿 세로 및 가로 뷰포트 |
lg: |
1024px 이상 | 노트북 및 일반 데스크톱 화면 |
xl: |
1280px 이상 | 대형 와이드 모니터 뷰포트 |
2xl: |
1536px 이상 | 초대형 울트라 와이드 시네마 스크린 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Mobile First Responsive Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex flex-col items-center justify-center font-sans">
<div class="max-w-4xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4 text-center">
<h2 class="text-3xl font-black text-white">Responsive Cards</h2>
<p class="text-sm text-slate-400 mt-1" id="viewport-label">브라우저 창 크기를 좌우로 늘리고 줄여 보강 효과를 확인하세요!</p>
</div>
<!-- Responsive Columns Container -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-slate-950 p-6 rounded-2xl">
<div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg">
<h3 class="font-bold text-white text-lg">Card A</h3>
<p class="text-slate-400 text-sm mt-2">모바일에서는 세로로 1열 정렬됩니다.</p>
</div>
<div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg">
<h3 class="font-bold text-white text-lg">Card B</h3>
<p class="text-slate-400 text-sm mt-2">태블릿 (md 이상)에서는 가로 2열 배열됩니다.</p>
</div>
<div class="bg-slate-800 border border-slate-700 p-6 rounded-xl shadow-lg md:col-span-2 lg:col-span-1">
<h3 class="font-bold text-white text-lg">Card C</h3>
<p class="text-slate-400 text-sm mt-2">데스크탑 (lg 이상)에 도달하면 나란히 3열이 완성됩니다.</p>
</div>
</div>
</div>
</body>
</html>그림자, 테두리, 라운드 효과
디테일이 살아있는 프리미엄 카드 디자인의 핵심 삼총사
웹 UI의 완성도를 200% 올려주는 숨은 공신은 바로 미세한 **둥근 모서리(Border-Radius)**와 부드럽게 퍼지는 **그림자(Box-Shadow)**, 그리고 정교한 **윤곽 테두리(Border)**의 상호 조합입니다. Tailwind CSS는 입체감 넘치는 컴포넌트 디자인을 한 줄로 소화해냅니다.
⚠️ 주의: border 단독 선언 시 테두리가 보이지 않는 현상
자주 저지르는 실수로, 윤곽선 색상 border-slate-700만 적어놓고 두께선인 border 선언을 빼먹으면 테두리가 렌더링되지 않습니다. 반드시 두께(border)를 명시한 뒤 색상(border-slate-700)을 덧붙이는 구조를 쌍으로 갖추어야 정상 표시됩니다.
| 디자인 특성 | 기본 적용 접두사 | 대표적인 수치 범위 스케일 |
|---|---|---|
| 모서리 곡률 (Radius) | rounded- |
rounded-sm (2px), rounded-md (6px), rounded-2xl (16px), rounded-full (100% 원) |
| 입체 그림자 (Shadow) | shadow- |
shadow-sm (미세함), shadow-md (보통), shadow-2xl (입체 레이어), shadow-inner (안쪽 음각) |
| 테두리 선 (Border Width) | border- |
border (1px), border-2 (2px), border-4 (4px), border-t-2 (위쪽만 2px 실선) |
| 선 종류 (Border Style) | border- |
border-solid (일반 실선), border-dashed (점선), border-dotted (둥근 점선) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Rounded & Shadow Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center font-sans">
<div class="max-w-xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4 text-center">
<h2 class="text-2xl font-black text-white">Glass Card Customizer</h2>
<p class="text-sm text-slate-400 mt-1">컨트롤 버튼으로 라운드(모서리)와 섀도우를 실시간 교체해 보세요!</p>
</div>
<!-- Playground Display Card -->
<div class="bg-slate-950 p-10 rounded-2xl flex justify-center items-center">
<div id="interactive-card" class="bg-slate-800/80 border border-slate-700/50 w-64 h-40 flex items-center justify-center font-extrabold text-xl text-white transition-all duration-300">
Demo Card
</div>
</div>
<!-- Buttons -->
<div class="grid grid-cols-2 gap-2">
<button onclick="changeStyle('rounded-none', 'shadow-none')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
Flat & Angular (none)
</button>
<button onclick="changeStyle('rounded-2xl', 'shadow-2xl shadow-pink-500/20')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg text-sm transition-all shadow-lg shadow-indigo-600/30">
Vibrant & Round (2xl)
</button>
</div>
</div>
</body>
</html>트랜지션과 애니메이션
부드러운 전환과 원클릭 애니메이션 탑재
정적인 웹은 따분합니다. Tailwind CSS는 마우스 호버 시 상태가 뚝뚝 끊겨 변하지 않도록 부드러운 가속 곡선을 그리는 **트랜지션(Transition)** 제어 및 로딩 아이콘 핑(ping) 스켈레톤 등의 기본 **애니메이션(Animation)**을 한 단어 문법으로 지원합니다.
⚠️ 주의: transition-all 선언 시의 성능 경고
화면 내 수백 개의 요소에 버릇처럼 transition-all(모든 속성 전환)을 부여하면 브라우저 렌더링 스택(Reflow/Repaint)에 과부하가 걸려 모바일 기기에서 프레임 저하가 발생합니다. 꼭 변형될 속성만 한정해서 transition-colors(색상 한정) 또는 transition-transform(크기 한정)처럼 타겟을 좁혀 정의하는 아키텍처가 최고 성능을 냅니다.
| 클래스 대항군 | 구체적 의미 및 설정값 | 실무 권장 사례 |
|---|---|---|
transition-colors |
배경색, 글자색 테두리색 변형 전환 효과 활성화 | transition-colors duration-200 (버튼 호버용) |
duration-{ms} |
변환이 지속될 시간 설정 (75, 100, 150, 200, 300, 500, 700, 1000) | duration-300 (300ms = 0.3초) |
ease-in-out |
시작과 끝은 부드럽게 감속하고 중간 속도는 빠르게 보정 | 부드럽고 고급스러운 UI에 무조건 권장 |
animate-spin |
360도 무한 스핀 회전 애니메이션 | API 통신 중 로딩 스피너(Loader icon) |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation Playground</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen p-12 flex flex-col items-center justify-center gap-12 font-sans">
<div class="max-w-2xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4 text-center">
<h2 class="text-2xl font-black text-white">Animations Dashboard</h2>
<p class="text-sm text-slate-400 mt-1">기본 제공되는 내장 애니메이션 효과를 확인하세요!</p>
</div>
<!-- Playground Targets -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 bg-slate-950 p-6 rounded-2xl justify-items-center">
<!-- Spin -->
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 border-4 border-slate-700 border-t-emerald-500 rounded-full animate-spin"></div>
<span class="text-xs text-slate-400 font-mono">animate-spin</span>
</div>
<!-- Pulse -->
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-blue-500 rounded-full animate-pulse"></div>
<span class="text-xs text-slate-400 font-mono">animate-pulse</span>
</div>
<!-- Bounce -->
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 bg-indigo-500 rounded-xl animate-bounce flex items-center justify-center font-bold">✨</div>
<span class="text-xs text-slate-400 font-mono">animate-bounce</span>
</div>
<!-- Ping -->
<div class="flex flex-col items-center gap-2">
<div class="relative flex h-10 w-10 items-center justify-center mt-1">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-6 w-6 bg-red-500"></span>
</div>
<span class="text-xs text-slate-400 font-mono">animate-ping</span>
</div>
</div>
</div>
</body>
</html>다크 모드 완벽 지원
현대 웹의 핵심 트렌드, 다크 테마 이식
최신 테크 서비스의 필수 기능은 단연 눈의 피로도를 낮춰주는 다크모드입니다. Tailwind CSS는 별도의 복잡한 테마 스타일 규칙 없이, 원하는 요소 클래스명에 dark:라는 접두사 단어 한 개만 앞에 끼우면 다크 모드 활성화 시 자동으로 해당 스타일로 교체 작동하는 초간단 아키텍처를 자랑합니다.
💡 실무 지침: Class 다크모드 설정 권장
기본 OS 상태에 반응하는 미디어(media) 쿼리 방식 대신, tailwind.config.js에 darkMode: 'class' 설정을 주입하여 수동 토글 모드 아키텍처를 가져가는 것이 모범사례입니다. 이를 통해 자바스크립트로 최상위 root인 <html> 노드에 .dark 클래스만 붙였다 떼는 것으로 다크 테마를 완벽히 장악 제어할 수 있습니다.
| 다크모드 설정 옵션 | 작동 매커니즘 | 실무 구현 복잡성 및 장점 |
|---|---|---|
media (기본값) |
사용자 OS 설정값(Windows/macOS 시스템 다크모드) 감지 후 자동 실행 | 따로 JS 코드를 짤 필요가 없어 극도로 단순하나, 서비스 내의 토글 스위치 단추 제어가 불가능함 |
class (권장) |
최상단 html 노드에 class="dark"가 존재할 때 dark: 접두사 가동 |
수동 테마 변경 스위치를 구현할 수 있으며, 사용자의 최종 선택 테마를 LocalStorage에 영구 저장 가능 |
<!DOCTYPE html>
<html lang="ko" class="">
<head>
<meta charset="UTF-8">
<title>Dark Mode Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
</head>
<body class="bg-white text-slate-800 dark:bg-slate-900 dark:text-slate-100 min-h-screen p-8 flex items-center justify-center font-sans transition-colors duration-300">
<div class="max-w-md w-full bg-slate-100 dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-6">
<div class="flex justify-between items-center border-b border-slate-200 dark:border-slate-700 pb-4">
<h2 class="text-2xl font-black text-slate-900 dark:text-white">Workspace</h2>
<button onclick="toggleDarkMode()" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-xl text-xs shadow-md transition-all">
테마 스위칭
</button>
</div>
<div class="space-y-4">
<p class="text-sm text-slate-600 dark:text-slate-400">
이 대시보드 컴포넌트는 다크 모드 기동 시 테두리 색상과 배경 카드 색상이 <code>dark:bg-slate-800</code>, <code>dark:text-white</code>로 매끄럽게 교체됩니다.
</p>
</div>
</div>
</body>
</html>실무 세팅과 커스터마이징
기업 디자인 시스템을 이식하는 설정 파일 커스터마이징
기본 제공된 스케일만 사용하는 단계를 넘어, 실무에서는 회사 로고 색상을 이식하거나 커스텀 폰트를 추가해 나만의 맞춤형 Tailwind를 빌드해야 합니다. 루트 디렉토리의 tailwind.config.js 설정 파일 설계법을 통제하면 프레임워크 한계를 넘어 극도의 확장이 가능합니다.
⚠️ 경고: theme 노드 바로 밑에 색상을 선언하지 말 것
테마 커스텀 색상을 추가하기 위해 theme: { colors: { brand: '#ff0000' } } 형태로 extend 노드를 건너뛰고 최상단에 직접 색상을 선언하면 절대 안 됩니다! 이렇게 선언하면 Tailwind가 기본 제공하는 수십만 개의 훌륭한 색상 팔레트 전체가 삭제되는 오버라이트 참사가 발생합니다. 반드시 theme: { extend: { colors: { ... } } } 형태로 extend 블록 내부에 작성하여 기본값을 계승 보존하세요!
| 설정 노드 명칭 | 역할과 목적 | 실전 설정 구성 예시 |
|---|---|---|
content |
실제 배포 빌드 시 클래스가 들어있는 템플릿 파일들의 경로 필터링 (트리쉐이킹 용도) | ['./src/**/*.{html,js,jsx,tsx}'] |
theme.extend |
기본 테마 레이아웃 스케일을 모두 살려두고, 나만의 색상, 크기, 폰트만 안전하게 이식 | extend: { colors: { 'brand-blue': '#0ea5e9' } } |
darkMode |
다크 모드를 가동할 동작 모드(Media vs Class) 정의 | darkMode: 'class' |
plugins |
비공식/공식 패키지 기능 추가 (라인 클램프 텍스트 자르기, 양식 폼 초기화 등) | [require('@tailwindcss/typography')] |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Custom Theme config Play</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand-corp': '#0ea5e9',
'brand-accent': '#f43f5e'
}
}
}
}
</script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex items-center justify-center font-sans">
<div class="max-w-md w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4 text-center">
<span class="text-xs font-bold text-brand-corp tracking-widest uppercase">Tailwind CLI config</span>
<h2 class="text-2xl font-black text-white mt-1">Corporate Custom Theme</h2>
</div>
<div class="space-y-4">
<p class="text-sm text-slate-400">
아래의 예쁜 하늘색 버튼은 기본 Tailwind 스케일이 아닌, 자바스크립트 config를 통해 동적으로 주입된 <code class="text-brand-corp">bg-brand-corp</code> 클래스를 이용해 다듬어졌습니다!
</p>
<button onclick="console.log('💎 커스텀 테마 버튼 클릭됨!')" class="w-full bg-brand-corp hover:bg-sky-400 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-sky-500/30">
브랜드 컬러 버튼 (bg-brand-corp)
</button>
</div>
</div>
</body>
</html>