# 챕터 7: Tailwind CSS 시작하기
## 서론
지금까지 우리는 전통적인 CSS 작성 방법을 배웠습니다. CSS 파일을 만들고, 클래스를 정의하고, HTML 요소에 적용하는 과정을 거쳤습니다. 하지만 현대 웹 개발에서는 더 빠르고 효율적인 방법을 추구합니다. 바로 Tailwind CSS가 그 해답 중 하나입니다.
Tailwind CSS는 '유틸리티 우선(Utility-First)' CSS 프레임워크입니다. 이것은 마치 레고 블록처럼 미리 만들어진 작은 스타일 조각들을 조합하여 디자인을 완성하는 방식입니다. 처음에는 낯설게 느껴질 수 있지만, 익숙해지면 놀라울 정도로 빠르게 아름다운 UI를 만들 수 있습니다. 이번 챕터에서는 Tailwind CSS의 기본 개념과 사용법을 차근차근 알아보겠습니다.
## 본론
### Tailwind CSS란 무엇인가
Tailwind CSS는 2017년 Adam Wathan이 만든 CSS 프레임워크입니다. 전통적인 CSS 프레임워크들이 미리 디자인된 컴포넌트(버튼, 카드 등)를 제공하는 것과 달리, Tailwind는 낮은 수준의 유틸리티 클래스들을 제공합니다. 예를 들어, 'bg-blue-500'은 파란색 배경을, 'text-center'는 텍스트 중앙 정렬을, 'p-4'는 패딩을 의미합니다.
이러한 접근 방식의 장점은 무엇일까요? 첫째, CSS 파일을 별도로 작성할 필요가 없습니다. 둘째, 클래스 이름을 고민할 필요가 없습니다. 셋째, 디자인의 일관성이 자연스럽게 유지됩니다. 넷째, 사용하지 않는 스타일은 자동으로 제거되어 파일 크기가 최적화됩니다.
Next.js 프로젝트를 생성할 때 Tailwind CSS를 선택했다면 이미 설정이 완료되어 있을 것입니다. 혹시 Tailwind가 제대로 설치되어 있는지 궁금하다면 터미널에서 다음 명령어로 확인해볼 수 있습니다:
npm list tailwindcss이 명령어를 실행하면 설치된 Tailwind CSS의 버전을 확인할 수 있습니다. 프로젝트 루트 폴더에 tailwind.config.js 파일이 보이지 않더라도 걱정하지 마세요. 최신 버전의 Tailwind CSS(v4.x)에서는 별도의 설정 파일 없이도 app/globals.css 파일에서 바로 작동하도록 개선되었습니다. Tailwind CSS가 정상적으로 설치되어 있다면 바로 유틸리티 클래스들을 사용할 수 있습니다.
### 첫 번째 Tailwind 클래스 사용하기
Tailwind CSS의 클래스는 직관적으로 이름이 지어져 있습니다. 몇 가지 기본적인 예시를 살펴보겠습니다:
챕터 6에서부터 이어서 진행하실 경우엔 globals.css에 의한 속성이 우선될 수 있습니다. 이번 챕터에서 사용할 tailwind CSS만 적용을 하기 위해서 globals.css 파일 내 @import "tailwindcss"; 만 남기고 모두 제거하는 것이 좋습니다.
export default function TailwindBasics() {
return (
<div className="p-8 bg-gray-100">
<h1 className="text-3xl font-bold text-blue-600 mb-4">
Tailwind CSS 시작하기
</h1>
<p className="text-gray-700 leading-relaxed mb-6">
이것은 Tailwind CSS로 스타일링한 문단입니다.
클래스명만으로 모든 스타일을 적용할 수 있습니다.
</p>
<button className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
클릭하세요
</button>
</div>
)
}
각 클래스의 의미를 설명하겠습니다:
- `p-8`: padding을 2rem (32px) 적용
- `bg-gray-100`: 연한 회색 배경색
- `text-3xl`: 매우 큰 텍스트 크기
- `font-bold`: 굵은 글씨
- `text-blue-600`: 파란색 텍스트
- `mb-4`: margin-bottom을 1rem (16px) 적용
- `px-6`: padding-left와 padding-right를 1.5rem 적용
- `py-2`: padding-top과 padding-bottom을 0.5rem 적용
- `rounded`: 둥근 모서리
- `hover:bg-blue-600`: 마우스 호버 시 더 진한 파란색 배경
### 색상 시스템 이해하기
Tailwind CSS는 체계적인 색상 시스템을 제공합니다. 각 색상은 50부터 900까지의 숫자로 명도를 표현합니다. 숫자가 클수록 더 진한 색상입니다:
export default function ColorPalette() {
return (
<div className="p-8">
<h2 className="text-2xl font-bold mb-6">Tailwind 색상 팔레트</h2>
{/* 파란색 계열 */}
<div className="mb-8">
<h3 className="text-lg font-semibold mb-3">Blue 색상</h3>
<div className="flex gap-2">
<div className="w-20 h-20 bg-blue-100 rounded"></div>
<div className="w-20 h-20 bg-blue-300 rounded"></div>
<div className="w-20 h-20 bg-blue-500 rounded"></div>
<div className="w-20 h-20 bg-blue-700 rounded"></div>
<div className="w-20 h-20 bg-blue-900 rounded"></div>
</div>
</div>
{/* 회색 계열 */}
<div className="mb-8">
<h3 className="text-lg font-semibold mb-3">Gray 색상</h3>
<div className="flex gap-2">
<div className="w-20 h-20 bg-gray-100 rounded border"></div>
<div className="w-20 h-20 bg-gray-300 rounded"></div>
<div className="w-20 h-20 bg-gray-500 rounded"></div>
<div className="w-20 h-20 bg-gray-700 rounded"></div>
<div className="w-20 h-20 bg-gray-900 rounded"></div>
</div>
</div>
{/* 특별한 색상들 */}
<div>
<h3 className="text-lg font-semibold mb-3">상태 색상</h3>
<div className="flex gap-4">
<div className="bg-green-500 text-white px-4 py-2 rounded">성공</div>
<div className="bg-yellow-500 text-white px-4 py-2 rounded">경고</div>
<div className="bg-red-500 text-white px-4 py-2 rounded">위험</div>
<div className="bg-indigo-500 text-white px-4 py-2 rounded">정보</div>
</div>
</div>
</div>
)
}
### 간격(Spacing) 시스템
Tailwind의 간격 시스템은 일관된 디자인을 만드는 데 매우 중요합니다. 숫자는 0.25rem의 배수를 의미합니다:
export default function SpacingExample() {
return (
<div className="p-8 bg-gray-50">
<h2 className="text-2xl font-bold mb-6">간격 시스템 예제</h2>
{/* Padding 예제 */}
<div className="mb-8">
<h3 className="text-lg font-semibold mb-3">Padding 크기</h3>
<div className="space-y-2">
<div className="bg-blue-200 p-1">p-1 (0.25rem)</div>
<div className="bg-blue-300 p-2">p-2 (0.5rem)</div>
<div className="bg-blue-400 p-4">p-4 (1rem)</div>
<div className="bg-blue-500 p-8">p-8 (2rem)</div>
</div>
</div>
{/* Margin 예제 */}
<div>
<h3 className="text-lg font-semibold mb-3">Margin 활용</h3>
<div className="bg-white p-4 rounded shadow">
<div className="bg-green-200 p-2">첫 번째 요소</div>
<div className="bg-green-300 p-2 mt-2">mt-2 (위쪽 여백 0.5rem)</div>
<div className="bg-green-400 p-2 mt-4">mt-4 (위쪽 여백 1rem)</div>
<div className="bg-green-500 p-2 mt-8">mt-8 (위쪽 여백 2rem)</div>
</div>
</div>
{/* 방향별 간격 */}
<div className="mt-8">
<h3 className="text-lg font-semibold mb-3">방향별 간격 지정</h3>
<div className="bg-purple-200 pt-8 pr-6 pb-4 pl-2">
pt-8 (위), pr-6 (오른쪽), pb-4 (아래), pl-2 (왼쪽)
</div>
<div className="bg-purple-300 px-8 py-2 mt-2">
px-8 (좌우), py-2 (상하)
</div>
</div>
</div>
)
}
### 텍스트 스타일링
Tailwind는 텍스트 관련 다양한 유틸리티 클래스를 제공합니다:
export default function TextStyling() {
return (
<div className="p-8">
<h2 className="text-3xl font-bold mb-8">텍스트 스타일링</h2>
{/* 크기 */}
<div className="mb-8">
<p className="text-xs mb-2">text-xs - 아주 작은 텍스트</p>
<p className="text-sm mb-2">text-sm - 작은 텍스트</p>
<p className="text-base mb-2">text-base - 기본 텍스트</p>
<p className="text-lg mb-2">text-lg - 큰 텍스트</p>
<p className="text-xl mb-2">text-xl - 더 큰 텍스트</p>
<p className="text-2xl mb-2">text-2xl - 매우 큰 텍스트</p>
</div>
{/* 굵기 */}
<div className="mb-8">
<p className="font-thin mb-2">font-thin - 매우 얇은 글씨</p>
<p className="font-light mb-2">font-light - 얇은 글씨</p>
<p className="font-normal mb-2">font-normal - 보통 글씨</p>
<p className="font-medium mb-2">font-medium - 중간 굵기</p>
<p className="font-semibold mb-2">font-semibold - 약간 굵은 글씨</p>
<p className="font-bold mb-2">font-bold - 굵은 글씨</p>
<p className="font-extrabold mb-2">font-extrabold - 매우 굵은 글씨</p>
</div>
{/* 정렬 */}
<div className="mb-8">
<p className="text-left bg-gray-100 p-2 mb-2">text-left - 왼쪽 정렬</p>
<p className="text-center bg-gray-100 p-2 mb-2">text-center - 중앙 정렬</p>
<p className="text-right bg-gray-100 p-2 mb-2">text-right - 오른쪽 정렬</p>
<p className="text-justify bg-gray-100 p-2">text-justify - 양쪽 정렬</p>
</div>
{/* 스타일 */}
<div>
<p className="italic mb-2">italic - 기울임꼴</p>
<p className="underline mb-2">underline - 밑줄</p>
<p className="line-through mb-2">line-through - 취소선</p>
<p className="uppercase mb-2">uppercase - 모두 대문자</p>
<p className="lowercase mb-2">LOWERCASE - 모두 소문자</p>
<p className="capitalize mb-2">capitalize - 첫 글자만 대문자</p>
</div>
</div>
)
}
### 테두리와 둥근 모서리
테두리와 둥근 모서리로 요소를 더욱 세련되게 만들 수 있습니다:
export default function BordersAndRadius() {
return (
<div className="p-8">
<h2 className="text-2xl font-bold mb-6">테두리와 둥근 모서리</h2>
{/* 테두리 */}
<div className="grid grid-cols-3 gap-4 mb-8">
<div className="border p-4">border - 기본 테두리</div>
<div className="border-2 p-4">border-2 - 2px 테두리</div>
<div className="border-4 p-4">border-4 - 4px 테두리</div>
<div className="border-t-4 p-4">border-t-4 - 위쪽만</div>
<div className="border-l-4 border-blue-500 p-4">왼쪽 파란 테두리</div>
<div className="border-dashed border-2 p-4">점선 테두리</div>
</div>
{/* 둥근 모서리 */}
<div className="grid grid-cols-4 gap-4">
<div className="bg-blue-500 text-white p-4 text-center">
각진 모서리
</div>
<div className="bg-blue-500 text-white p-4 rounded text-center">
rounded
</div>
<div className="bg-blue-500 text-white p-4 rounded-lg text-center">
rounded-lg
</div>
<div className="bg-blue-500 text-white p-4 rounded-full text-center">
rounded-full
</div>
</div>
</div>
)
}
### 실습: Tailwind로 카드 컴포넌트 만들기
이제 배운 내용을 종합하여 실용적인 카드 컴포넌트를 만들어봅시다:
export default function TailwindCard() {
return (
<div className="p-8 bg-gray-100 min-h-screen">
<div className="max-w-4xl mx-auto">
<h1 className="text-3xl font-bold text-center mb-8">
Tailwind CSS 카드 갤러리
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* 카드 1 */}
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<div className="h-48 bg-gradient-to-r from-blue-400 to-blue-600"></div>
<div className="p-6">
<h3 className="text-xl font-semibold mb-2">기본 카드</h3>
<p className="text-gray-600 mb-4">
Tailwind CSS로 만든 깔끔한 카드 디자인입니다.
호버 효과도 추가했습니다.
</p>
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
자세히 보기
</button>
</div>
</div>
{/* 카드 2 */}
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<div className="h-48 bg-gradient-to-r from-green-400 to-green-600"></div>
<div className="p-6">
<div className="flex items-center mb-2">
<span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
새로운
</span>
<h3 className="text-xl font-semibold ml-2">태그가 있는 카드</h3>
</div>
<p className="text-gray-600 mb-4">
배지나 태그를 추가하여 정보를 강조할 수 있습니다.
</p>
<div className="flex justify-between items-center">
<span className="text-gray-500 text-sm">2025.01.15</span>
<button className="text-green-500 hover:text-green-600 font-medium">
더 보기 →
</button>
</div>
</div>
</div>
{/* 카드 3 */}
<div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
<div className="h-48 bg-gradient-to-r from-purple-400 to-purple-600"></div>
<div className="p-6">
<h3 className="text-xl font-semibold mb-2">상호작용 카드</h3>
<p className="text-gray-600 mb-4">
다양한 버튼과 액션을 포함할 수 있습니다.
</p>
<div className="flex gap-2">
<button className="flex-1 bg-purple-500 text-white py-2 rounded hover:bg-purple-600">
좋아요
</button>
<button className="flex-1 border border-purple-500 text-purple-500 py-2 rounded hover:bg-purple-50">
공유
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
## 결론
Tailwind CSS는 처음에는 클래스명이 길고 복잡해 보일 수 있지만, 일단 익숙해지면 매우 빠르고 효율적으로 UI를 개발할 수 있는 강력한 도구입니다. 이번 챕터에서 우리는 Tailwind CSS의 기본 개념, 색상 시스템, 간격 시스템, 텍스트 스타일링, 테두리와 둥근 모서리 등 핵심 기능들을 배웠습니다.
Tailwind CSS의 가장 큰 장점은 디자인의 일관성을 자연스럽게 유지할 수 있다는 것입니다. 미리 정의된 디자인 토큰(색상, 간격 등)을 사용하므로 팀 전체가 동일한 디자인 언어를 사용하게 됩니다. 또한 CSS 파일을 별도로 관리할 필요가 없어 개발 속도가 향상됩니다.
다음 챕터에서는 Tailwind CSS의 고급 기능들을 배워보겠습니다. 반응형 디자인, Flexbox와 Grid 레이아웃, 그리고 커스텀 설정 방법 등을 다룰 예정입니다. Tailwind CSS와 함께라면 여러분도 전문적인 수준의 UI를 만들 수 있습니다!
'학습자료 > Next.js 초보자 학습 과정' 카테고리의 다른 글
| # Next.js 가이드 / 챕터 9: Components - 레고 블록처럼 조립하기 (4) | 2025.08.11 |
|---|---|
| # Next.js 가이드 / 챕터 8: Tailwind CSS 실전 활용법 (7) | 2025.08.09 |
| # Next.js 가이드 / 챕터 6: Global CSS로 전체 스타일 관리하기 (4) | 2025.08.09 |
| # Next.js 가이드 / 챕터 5: CSS 기초 - 웹페이지에 스타일 입히기 (6) | 2025.08.08 |
| # Next.js 가이드 / 챕터 4: HTML 기본 태그 완전 정복 (7) | 2025.08.08 |