Tailwind CSS 완전정복
CSS를 클래스로 — 컴포넌트 단위 스타일링의 시작
v4 CDN
flex
grid
position
@theme
임의값 [ ]
CHAPTER 01
Tailwind란?
CSS를 별도 파일 없이 HTML 클래스로 바로 작성하는 유틸리티 퍼스트 프레임워크예요. CSS 파일과 HTML 파일을 왔다갔다 안 해도 돼요.
가장 간단한 예시 — 버튼 하나
기존 CSS — 파일 2개
/* style.css */
.btn {
background: #3b82f6;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
}
/* HTML */
<button class="btn">버튼</button>
.btn {
background: #3b82f6;
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
}
/* HTML */
<button class="btn">버튼</button>
Tailwind — 파일 1개
/* CSS 파일 필요 없음 */
<button
class="bg-blue-500
text-white
px-4 py-2
rounded-lg
font-semibold">
버튼
</button>
<button
class="bg-blue-500
text-white
px-4 py-2
rounded-lg
font-semibold">
버튼
</button>
LIVE PREVIEW — 결과는 완전히 동일해요
기존 방식
=
Tailwind
결과는 동일 — 차이는 CSS 파일 없이 HTML에 바로 스타일을 쓴다는 것
왜 쓰나요?
✅ 장점
• CSS 파일 왔다갔다 안 해도 됨
• 클래스 이름 고민 필요 없음
• 디자인 시스템과 연동 쉬움
• 피그마 값 → 클래스로 바로 변환
• 클래스 이름 고민 필요 없음
• 디자인 시스템과 연동 쉬움
• 피그마 값 → 클래스로 바로 변환
⚠️ 단점
• HTML이 클래스로 길어짐
• 처음엔 클래스 이름 외워야 함
• CDN 버전은 실험적 (버그 있음)
• 복잡한 CSS는 한계 있음
• 처음엔 클래스 이름 외워야 함
• CDN 버전은 실험적 (버그 있음)
• 복잡한 CSS는 한계 있음
컴포넌트 개념 — Figma 컴포넌트와 같아요
COMPONENT = 재사용 가능한 UI 조각
전체 페이지
Header
카드
카드
카드
Footer
→
카드 컴포넌트
← 이걸 10개 복붙 = 상품목록
✅ 카드 디자인을 바꾸고 싶으면 카드 컴포넌트 하나만 수정하면 전체가 바뀌어요 — Figma 컴포넌트와 같은 개념!
CHAPTER 02
CDN 셋팅
npm 설치 없이
<script> 태그 한 줄로 바로 시작할 수 있어요. 수업에서는 v4를 사용해요.v4 CDN — 이렇게 시작해요
<!-- <head> 안에 한 줄만 추가 -->
<script
src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
></script>
<!-- 그리고 바로 클래스 사용 가능 -->
<div class="text-blue-500 font-bold p-4">Hello Tailwind!</div>
<script
src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"
></script>
<!-- 그리고 바로 클래스 사용 가능 -->
<div class="text-blue-500 font-bold p-4">Hello Tailwind!</div>
커스텀 컬러 추가 — @theme
<!-- script 아래에 style 태그 추가 -->
<style type="text/tailwindcss">
@theme {
--color-brand: #e63329;
--color-brand-dark: #b91c1c;
}
</style>
<!-- 선언하면 바로 클래스로 사용 가능 -->
<button class="bg-brand text-white">브랜드 버튼</button>
<style type="text/tailwindcss">
@theme {
--color-brand: #e63329;
--color-brand-dark: #b91c1c;
}
</style>
<!-- 선언하면 바로 클래스로 사용 가능 -->
<button class="bg-brand text-white">브랜드 버튼</button>
💡
@theme은 Figma 디자인 시스템 CSS 변수와 이름을 맞춰 쓸 수 있어서 일관성 유지가 편해요.--color-brand 선언하면 text-brand, bg-brand, border-brand 클래스로 바로 사용 가능!CSS 변수를 클래스로 — makeon 예제
/* :root에 변수 선언 후 */
:root {
--default-color: #111111;
--sub-color: #666666;
}
/* v4에서 CSS 변수를 클래스로 사용 */
<body class="text-(--default-color)">
<p class="text-(--sub-color)">부제목</p>
:root {
--default-color: #111111;
--sub-color: #666666;
}
/* v4에서 CSS 변수를 클래스로 사용 */
<body class="text-(--default-color)">
<p class="text-(--sub-color)">부제목</p>
⚠️ v3에서는
text-[var(--sub-color)]로 써야 했는데 v4에서는 text-(--sub-color)로 더 짧아졌어요. v3/v4 문법 차이 전체는 부록 A를 참고하세요.CHAPTER 03
단위 시스템
Tailwind는 1단위 = 4px 체계예요. 정해진 스케일 안에서 일관되게 사용해요. 스케일에 없는 값은 대괄호 [ ]로 임의값을 쓸 수 있어요.
간격 단위 — padding / margin / gap
| 클래스 | px 값 | 클래스 | px 값 | 클래스 | px 값 |
|---|---|---|---|---|---|
p-1 / m-1 | 4px | p-5 / m-5 | 20px | p-12 | 48px |
p-2 / m-2 | 8px | p-6 / m-6 | 24px | p-16 | 64px |
p-3 / m-3 | 12px | p-7 / m-7 | 28px | p-20 | 80px |
p-4 / m-4 | 16px | p-8 / m-8 | 32px | p-24 | 96px |
임의값 [ ] — 스케일에 없는 값
/* 정해진 스케일 */
<div class="p-4"> ← 16px (4 × 4px)
<div class="w-64"> ← 256px
/* 임의값 — 대괄호 사용 */
<div class="w-[264px]"> ← 정확히 264px
<div class="h-[264px]"> ← 정확히 264px
<div class="text-[25px]"> ← 정확히 25px
<div class="bg-[#266ef0]">← 임의 컬러
<div class="max-w-[1640px]">← 임의 max-width
<div class="p-4"> ← 16px (4 × 4px)
<div class="w-64"> ← 256px
/* 임의값 — 대괄호 사용 */
<div class="w-[264px]"> ← 정확히 264px
<div class="h-[264px]"> ← 정확히 264px
<div class="text-[25px]"> ← 정확히 25px
<div class="bg-[#266ef0]">← 임의 컬러
<div class="max-w-[1640px]">← 임의 max-width
✅ 실무 디자인 수치가 딱 맞는 Tailwind 스케일에 없을 때 임의값을 써요. deahan 예제의
max-w-[1640px], py-[50px] 같은 경우예요.텍스트 크기 스케일
| 클래스 | 크기 | 클래스 | 크기 |
|---|---|---|---|
text-xs | 12px | text-2xl | 24px |
text-sm | 14px | text-3xl | 30px |
text-base | 16px | text-4xl | 36px |
text-lg | 18px | text-5xl | 48px |
text-xl | 20px | text-[25px] | 임의값 |
CHAPTER 04
Layout — flex
Tailwind에서 flex는 클래스 조합으로 표현해요. flex → 방향 → 정렬 → 간격 순서로 쌓아가면 돼요.
핵심 클래스
/* flex 활성화 */
<div class="flex">
/* 방향 */
flex-row ← 기본 (가로)
flex-col ← 세로
/* 주축 정렬 (justify-content) */
justify-start ← 왼쪽
justify-center ← 가운데
justify-between ← 양쪽 끝
/* 교차축 정렬 (align-items) */
items-start ← 위
items-center ← 가운데
items-baseline ← 텍스트 기준선 (폰트 크기 다를 때)
/* 간격 */
gap-4 ← 16px 간격
gap-7 ← 28px 간격 (makeon 예제)
<div class="flex">
/* 방향 */
flex-row ← 기본 (가로)
flex-col ← 세로
/* 주축 정렬 (justify-content) */
justify-start ← 왼쪽
justify-center ← 가운데
justify-between ← 양쪽 끝
/* 교차축 정렬 (align-items) */
items-start ← 위
items-center ← 가운데
items-baseline ← 텍스트 기준선 (폰트 크기 다를 때)
/* 간격 */
gap-4 ← 16px 간격
gap-7 ← 28px 간격 (makeon 예제)
라이브 프리뷰
LIVE PREVIEW — 버튼으로 정렬 변경
A
B
C
flex justify-start items-center gap-4
justify
grow — makeon 예제에서
/* makeon.html — 이벤트 카드 3개 균등 분배 */
<div class="flex gap-7">
<a class="grow basis-full flex flex-col ...">
<a class="grow basis-full flex flex-col ...">
<a class="grow basis-full flex flex-col ...">
</div>
/* grow = flex-grow: 1 → 남은 공간 균등 분배 */
/* basis-full = flex-basis: 100% → 시작 크기 동일 */
<div class="flex gap-7">
<a class="grow basis-full flex flex-col ...">
<a class="grow basis-full flex flex-col ...">
<a class="grow basis-full flex flex-col ...">
</div>
/* grow = flex-grow: 1 → 남은 공간 균등 분배 */
/* basis-full = flex-basis: 100% → 시작 크기 동일 */
CHAPTER 05
Layout — grid
grid는 열 수를 먼저 정하면 나머지는 자동으로 채워져요.
grid-cols-숫자로 열을 나눠요.핵심 클래스
grid ← grid 활성화
grid-cols-4 ← 4열
grid-cols-5 ← 5열 (logo-grid 예제)
gap-3 ← 12px 간격
col-span-2 ← 2칸 차지
/* deahan 예제 */
<div class="grid grid-cols-4">
<div>Merit 소개</div> ← 1열
<div>Merit01</div> ← 2열
<div>Merit02</div> ← 3열
<video> ← 4열 → 자동으로 다음줄
</div>
grid-cols-4 ← 4열
grid-cols-5 ← 5열 (logo-grid 예제)
gap-3 ← 12px 간격
col-span-2 ← 2칸 차지
/* deahan 예제 */
<div class="grid grid-cols-4">
<div>Merit 소개</div> ← 1열
<div>Merit01</div> ← 2열
<div>Merit02</div> ← 3열
<video> ← 4열 → 자동으로 다음줄
</div>
라이브 프리뷰
LIVE PREVIEW — 열 수 변경
1
2
3
4
5
6
7
8
grid grid-cols-4 gap-2
grid-cols
CHAPTER 06
position
CSS position과 1:1 대응이에요. relative + absolute 세트가 핵심이에요.
클래스 대응표
CSS
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 0;
right: 12px;
bottom: 12px;
left: 0;
position: absolute;
position: fixed;
position: sticky;
top: 0;
right: 12px;
bottom: 12px;
left: 0;
Tailwind
relative
absolute
fixed
sticky
top-0
right-3 ← 12px (3 × 4px)
bottom-3 ← 12px
left-0
absolute
fixed
sticky
top-0
right-3 ← 12px (3 × 4px)
bottom-3 ← 12px
left-0
상품 카드 뱃지 — 실습 예제
/* relative 부모 */
<div class="relative">
/* 이미지 링크 */
<a class="block w-full h-[264px]
bg-[url(img/origin01.jpg)]
bg-cover bg-center">
/* BEST 뱃지 — absolute 좌상단 */
<span class="absolute top-0 left-0
text-white font-bold bg-[#111]
rounded-br-md"
style="padding:3px 8px">
BEST
</span>
</a>
/* 장바구니 버튼 — absolute 우하단 */
<button class="absolute right-3 bottom-3
w-10 h-10 bg-white rounded-full">
</div>
<div class="relative">
/* 이미지 링크 */
<a class="block w-full h-[264px]
bg-[url(img/origin01.jpg)]
bg-cover bg-center">
/* BEST 뱃지 — absolute 좌상단 */
<span class="absolute top-0 left-0
text-white font-bold bg-[#111]
rounded-br-md"
style="padding:3px 8px">
BEST
</span>
</a>
/* 장바구니 버튼 — absolute 우하단 */
<button class="absolute right-3 bottom-3
w-10 h-10 bg-white rounded-full">
</div>
LIVE PREVIEW
BEST
🛒
⚠️
span은 inline 요소 — absolute를 쓰면 block처럼 동작하지만 패딩이 안 먹을 수 있어요. 패딩은 인라인 style로 처리하는 게 안전해요 (v4 버그 참고).CHAPTER 07
텍스트 & 색상
자주 쓰는 텍스트 클래스
/* 크기 */
text-[25px] ← 임의값 (deahan)
text-2xl ← 24px
/* 굵기 */
font-light ← 300
font-medium ← 500
font-semibold ← 600
font-bold ← 700
/* 행간 */
leading-[1.4] ← line-height: 1.4
leading-tight ← 1.25
/* 말줄임 */
truncate ← 한 줄 말줄임
line-clamp-2 ← 두 줄 말줄임 (-webkit-box 3줄 코드 자동 처리!)
/* 자간 */
tracking-tight ← letter-spacing 좁게 (makeon)
uppercase ← 대문자
text-[25px] ← 임의값 (deahan)
text-2xl ← 24px
/* 굵기 */
font-light ← 300
font-medium ← 500
font-semibold ← 600
font-bold ← 700
/* 행간 */
leading-[1.4] ← line-height: 1.4
leading-tight ← 1.25
/* 말줄임 */
truncate ← 한 줄 말줄임
line-clamp-2 ← 두 줄 말줄임 (-webkit-box 3줄 코드 자동 처리!)
/* 자간 */
tracking-tight ← letter-spacing 좁게 (makeon)
uppercase ← 대문자
색상 — 팔레트 vs 임의값
/* Tailwind 내장 팔레트 */
text-blue-500 ← #3b82f6
bg-amber-200 ← #fde68a (logo-grid 배경)
text-orange-600 ← #ea580c
/* 임의 컬러 */
text-[#266ef0] ← deahan 브랜드 블루
bg-[#d9d5c7] ← deahan 뱃지 배경
border-[#979891] ← deahan 테두리
/* @theme 커스텀 컬러 (v4) */
text-brand-green ← @theme에서 선언한 변수 사용
text-blue-500 ← #3b82f6
bg-amber-200 ← #fde68a (logo-grid 배경)
text-orange-600 ← #ea580c
/* 임의 컬러 */
text-[#266ef0] ← deahan 브랜드 블루
bg-[#d9d5c7] ← deahan 뱃지 배경
border-[#979891] ← deahan 테두리
/* @theme 커스텀 컬러 (v4) */
text-brand-green ← @theme에서 선언한 변수 사용
CHAPTER 08
실습 예제
수업에서 만든 파일들의 핵심 Tailwind 패턴을 확인해요. 완성 결과 → 코드 → 한 줄 해설 순서로 읽으세요.
makeon — flex + grow + 중앙 정렬
완성 결과
Premium Collection
MAKEON
카드 A
카드 B
카드 C
/* 제목: flex-col + items-center */
<h2 class="flex flex-col items-center mb-12">
<span class="text-[22px] font-light tracking-tight">
<span class="eng text-[50px] font-bold">
/* 카드 3개 균등 분배 */
<div class="flex gap-7">
<a class="grow basis-full flex flex-col items-center gap-4">
<h2 class="flex flex-col items-center mb-12">
<span class="text-[22px] font-light tracking-tight">
<span class="eng text-[50px] font-bold">
/* 카드 3개 균등 분배 */
<div class="flex gap-7">
<a class="grow basis-full flex flex-col items-center gap-4">
📌 grow basis-full — flex-grow:1 + flex-basis:100%로 3개 카드가 남은 공간을 균등하게 나눠 가져요
deahan — grid 4열 + border 조합
완성 결과
/* 4열 그리드 컨테이너 */
<div class="grid grid-cols-4
border border-[#979891] rounded-2xl">
/* 각 셀 — border-r, border-b로 구분선 */
<div class="border-r border-b border-[#979891]
py-[50px] px-[30px]">
<div class="grid grid-cols-4
border border-[#979891] rounded-2xl">
/* 각 셀 — border-r, border-b로 구분선 */
<div class="border-r border-b border-[#979891]
py-[50px] px-[30px]">
📌 border-r border-b — 각 셀에 오른쪽·아래쪽 테두리만 줘서 외곽선은 컨테이너 border 하나로 처리해요
logo-grid — 행마다 다른 열 수
완성 결과
S-OIL
KAL
NH
하나
ILDONG
DAOU
단국대
Sunmight
혜원
/* 1행: 5열 */
<div class="grid grid-cols-5 gap-3 mb-3">
<div>S-OIL</div> ... 5개
</div>
/* 2행: 4열 + 양쪽 여백 */
<div class="grid grid-cols-4 gap-3 px-[10%]">
<div>DAOU</div> ... 4개
</div>
<div class="grid grid-cols-5 gap-3 mb-3">
<div>S-OIL</div> ... 5개
</div>
/* 2행: 4열 + 양쪽 여백 */
<div class="grid grid-cols-4 gap-3 px-[10%]">
<div>DAOU</div> ... 4개
</div>
📌 px-[10%] — 양쪽 10% 여백으로 2행(4열)이 1행(5열)보다 안쪽으로 들어와 가운데 정렬처럼 보여요
부록 A
v3 vs v4 문법 차이
인터넷에서 Tailwind 코드를 찾다 보면 v3 문법이 섞여 있을 수 있어요. 차이점을 알아두면 헷갈리지 않아요.
v3 vs v4 문법 비교
v3 문법
/* CDN */
<script src="https://cdn.tailwindcss.com"></script>
/* 커스텀 컬러 설정 */
<script>
tailwind.config = {
theme: { extend: {
colors: { brand: '#e63329' }
}}
}
</script>
/* CSS 변수 사용 */
text-[var(--sub-color)]
<script src="https://cdn.tailwindcss.com"></script>
/* 커스텀 컬러 설정 */
<script>
tailwind.config = {
theme: { extend: {
colors: { brand: '#e63329' }
}}
}
</script>
/* CSS 변수 사용 */
text-[var(--sub-color)]
v4 문법 ✅ 수업 사용
/* CDN */
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
/* 커스텀 컬러 설정 */
<style type="text/tailwindcss">
@theme {
--color-brand: #e63329;
}
</style>
/* CSS 변수 사용 (더 짧음) */
text-(--sub-color)
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
/* 커스텀 컬러 설정 */
<style type="text/tailwindcss">
@theme {
--color-brand: #e63329;
}
</style>
/* CSS 변수 사용 (더 짧음) */
text-(--sub-color)
💡 구글에서 Tailwind 예제를 찾을 때 v3 문법이 나올 수 있어요. v4에서도 v3 문법이 대부분 동작하지만
@theme과 CSS 변수 단축 문법은 v4에서만 돼요.부록 B
주의사항 & 알려진 버그
@tailwindcss/browser@4는 실험적 버전이에요. 막힐 때 여기서 확인하세요.
padding 클래스 미적용 버그
/* ❌ span에 padding 클래스가 안 먹히는 경우 */
<span class="px-2 py-[3px]">BEST</span>
/* ✅ 해결 — 패딩만 인라인 style로 */
<span class="..."
style="padding: 3px 8px;">BEST</span>
/* v4 CDN이 실시간으로 클래스를 스캔해서 CSS를 생성하는 방식인데
이 과정에서 일부 패딩 유틸리티가 누락되는 파싱 이슈 */
<span class="px-2 py-[3px]">BEST</span>
/* ✅ 해결 — 패딩만 인라인 style로 */
<span class="..."
style="padding: 3px 8px;">BEST</span>
/* v4 CDN이 실시간으로 클래스를 스캔해서 CSS를 생성하는 방식인데
이 과정에서 일부 패딩 유틸리티가 누락되는 파싱 이슈 */
⚠️ 패딩이 안 먹힐 때는 당황하지 말고
style="padding:..." 인라인으로 처리하세요. 다른 속성은 정상 동작해요.CDN 두 개 동시 사용 금지
/* ❌ 충돌 — 둘 다 넣으면 안 됨 */
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
/* ✅ v4 하나만 사용 */
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
/* ✅ v4 하나만 사용 */
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>