TailwindCSS
TailwindCSS란?
TailwindCSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.
HTML 클래스 속성 안에 스타일을 바로 작성하는 방식입니다. 별도의 CSS 파일 없이도 스타일링이 가능합니다.
예를 들어 버튼을 만들 때 기존 방식이랑 비교하면 이렇습니다:
/* 기존 방식 - styles.css */
.btn {
background-color: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 6px;
}<!-- 기존 방식 - HTML -->
<button class="btn">클릭</button><!-- Tailwind 방식 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">클릭</button>처음에는 클래스가 너무 많았는데, HTML 파일 하나에서 스타일까지 바로 확인할 수 있다는 점이 생각보다 편리했습니다.
기존 CSS와 비교
| 기존 CSS | TailwindCSS | |
|---|---|---|
| 스타일 위치 | 별도 .css 파일 | HTML 클래스 안에 바로 |
| 클래스 이름 | 직접 지음 (.card, .btn...) | 미리 정의된 유틸리티 클래스 사용 |
| 작업 흐름 | HTML ↔ CSS 파일 왔다갔다 | HTML 한 파일에서 작업 가능 |
| 빌드 결과물 | 안 쓰는 CSS도 포함될 수 있음 | 실제 사용한 클래스만 포함 |
설치 방법
빠르게 테스트해보고 싶다면 (CDN)
<head> 안에 한 줄 추가하면 바로 사용할 수 있습니다:
<script src="https://cdn.tailwindcss.com"></script>다만 이 방법은 학습용이고, 실제 프로젝트에는 npm 설치를 권장한다고 합니다.
npm으로 설치하기 (일반 프로젝트)
npm install -D tailwindcss
npx tailwindcss init설치하면 tailwind.config.js 파일이 생기는데, 여기서 content 항목에 내 파일 경로를 적어줘야 합니다. 이걸 안 하면 클래스가 빌드 결과물에 포함이 안 됩니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"], // 내 파일 경로에 맞게 수정
theme: {
extend: {},
},
plugins: [],
}그다음 CSS 파일을 만들고 (src/input.css):
@tailwind base;
@tailwind components;
@tailwind utilities;빌드 명령어 실행:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch--watch를 붙이면 파일을 저장할 때마다 자동으로 빌드됩니다.
React + Vite 프로젝트
요즘 많이 쓰이는 조합이라 따로 정리했습니다:
npm create vite@latest my-app -- --template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p-p 옵션을 붙이면 postcss.config.js도 같이 만들어집니다.
클래스 규칙 이해하기
Tailwind 클래스에는 일정한 규칙이 있습니다.
[속성]-[값]text-red-500 → color: 빨간색 계열
bg-blue-300 → background: 파란색 계열 (연한 편)
p-4 → padding: 1rem
mt-8 → margin-top: 2rem
flex → display: flex
rounded-lg → border-radius: 0.5rem숫자 크기 단위
Tailwind에서 숫자 1 = 0.25rem = 4px
| 클래스 | 실제 크기 |
|---|---|
p-1 | 4px |
p-2 | 8px |
p-4 | 16px (1rem) |
p-8 | 32px (2rem) |
p-16 | 64px (4rem) |
4 = 1rem = 16px 이게 기준점이라고 생각하기
색상 숫자 규칙
색상 숫자는 작을수록 밝고, 클수록 어둡습니다.
gray-50 → 거의 흰색
gray-300 → 연한 회색
gray-500 → 중간 회색
gray-700 → 진한 회색
gray-900 → 거의 검정자주 쓰이는 클래스 정리
여백 (Padding / Margin)
<!-- Padding -->
<div class="p-4"> <!-- 상하좌우 모두 16px -->
<div class="px-4"> <!-- 좌우만 -->
<div class="py-4"> <!-- 상하만 -->
<div class="pt-4 pb-2"> <!-- 위 16px, 아래 8px -->
<!-- Margin -->
<div class="mt-4"> <!-- 위쪽만 -->
<div class="mx-auto"> <!-- 좌우 auto (수평 가운데 정렬) -->
<div class="mb-0"> <!-- 아래 여백 제거 -->mx-auto는 컨테이너를 가운데 정렬할 때 많이 쓰이는 것 같습니다. max-w-xl mx-auto 이렇게 세트로 자주 보입니다.
텍스트
<p class="text-sm"> <!-- 14px -->
<p class="text-base"> <!-- 16px, 기본 -->
<p class="text-lg"> <!-- 18px -->
<p class="text-xl"> <!-- 20px -->
<p class="text-2xl"> <!-- 24px -->
<p class="text-4xl"> <!-- 36px -->
<p class="font-bold"> <!-- 굵게 -->
<p class="font-semibold"> <!-- 약간 굵게 -->
<p class="text-center"> <!-- 가운데 정렬 -->
<p class="leading-relaxed"> <!-- 줄간격 넓게 -->Flexbox
레이아웃 잡을 때 flex를 제일 많이 사용하게 됩니다:
<div class="flex"> <!-- 가로 배치 -->
<div class="flex flex-col"> <!-- 세로 배치 -->
<div class="flex items-center"> <!-- 세로 중앙 정렬 -->
<div class="flex justify-center"> <!-- 가로 중앙 정렬 -->
<div class="flex justify-between"> <!-- 양 끝에 배치 -->
<div class="flex gap-4"> <!-- 아이템 간격 16px -->
<div class="flex flex-wrap"> <!-- 넘치면 줄 바꿈 -->Grid
<div class="grid grid-cols-2 gap-4"> <!-- 2열 그리드 -->
<div class="grid grid-cols-3 gap-6"> <!-- 3열 그리드 -->크기
<div class="w-full"> <!-- 너비 100% -->
<div class="w-1/2"> <!-- 너비 50% -->
<div class="w-64"> <!-- 너비 256px -->
<div class="h-screen"> <!-- 높이 100vh -->
<div class="max-w-lg"> <!-- 최대 너비 512px -->
<div class="max-w-2xl mx-auto"><!-- 컨테이너로 자주 쓰는 패턴 -->테두리 & 그림자
<div class="rounded"> <!-- 살짝 둥글게 -->
<div class="rounded-lg"> <!-- 더 둥글게 -->
<div class="rounded-xl"> <!-- 많이 둥글게 -->
<div class="rounded-full"> <!-- 완전 원형 -->
<div class="border border-gray-200"> <!-- 회색 테두리 -->
<div class="shadow"> <!-- 기본 그림자 -->
<div class="shadow-md"> <!-- 중간 그림자 -->
<div class="shadow-lg"> <!-- 큰 그림자 -->반응형 디자인
Tailwind는 모바일 퍼스트 방식입니다. 접두사 없는 클래스가 기본(모바일)이고, 접두사를 붙여서 큰 화면의 스타일을 추가합니다.
| 접두사 | 적용 시점 |
|---|---|
| (없음) | 모든 화면 (모바일 기준) |
sm: | 640px 이상 |
md: | 768px 이상 |
lg: | 1024px 이상 |
xl: | 1280px 이상 |
사용 예시:
<!-- 모바일: 1열 / 태블릿: 2열 / 데스크탑: 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
...
</div>
<!-- 모바일에서는 숨기고, 데스크탑에서만 표시 -->
<div class="hidden lg:block">
데스크탑에서만 보입니다
</div>
<!-- 화면 크기에 따라 텍스트 크기 조절 -->
<h1 class="text-2xl md:text-3xl lg:text-5xl font-bold">
제목
</h1>미디어 쿼리를 별도로 작성하지 않아도 돼서 편리합니다.
상태에 따른 스타일 (hover, focus 등)
인터랙션 스타일도 접두사를 붙이는 방식으로 처리합니다:
<!-- 마우스 올렸을 때 -->
<button class="bg-blue-500 hover:bg-blue-600">버튼</button>
<!-- 포커스 상태 -->
<input class="border focus:border-blue-500 focus:outline-none">
<!-- 비활성화 상태 -->
<button class="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
비활성화
</button>전환 효과도 간단하게 추가할 수 있습니다:
<button class="bg-blue-500 hover:bg-blue-600 transition-colors duration-200">
부드럽게 색상 변경
</button>다크 모드
dark: 접두사를 붙이면 다크 모드 스타일을 별도로 지정할 수 있습니다:
<div class="bg-white dark:bg-gray-900">
<h1 class="text-gray-900 dark:text-white">제목</h1>
<p class="text-gray-600 dark:text-gray-400">본문 텍스트</p>
</div>tailwind.config.js에서 방식을 설정할 수 있습니다:
// 시스템 설정을 따르는 방식 (기본값)
darkMode: 'media'
// 클래스로 직접 제어하는 방식
darkMode: 'class'블로그 카드 만들어보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-8">
<div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-sm w-full
transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl">
<!-- 썸네일 영역 -->
<div class="bg-gradient-to-br from-indigo-400 to-purple-500 h-44
flex items-center justify-center">
<span class="text-6xl">🛠️</span>
</div>
<!-- 카드 내용 -->
<div class="p-5">
<!-- 카테고리 태그 -->
<span class="text-xs font-semibold text-indigo-600 bg-indigo-50
px-2.5 py-1 rounded-full">
TailwindCSS
</span>
<!-- 제목 -->
<h2 class="text-lg font-bold text-gray-900 mt-3 mb-1.5 leading-snug">
TailwindCSS 공부 중입니다
</h2>
<!-- 요약 내용 -->
<p class="text-sm text-gray-500 leading-relaxed line-clamp-2">
CSS 파일 없이 HTML에서 바로 스타일을 적용하는 방식인데,
생각보다 빠르게 UI를 만들 수 있어서 공부해보고 있습니다.
</p>
<!-- 하단 정보 -->
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100">
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-pink-400 to-orange-400"></div>
<span class="text-sm font-medium text-gray-700">작성자</span>
</div>
<span class="text-xs text-gray-400">2025. 1. 1</span>
</div>
</div>
</div>
</body>
</html>공부하면서 헷갈렸던 부분들
오타가 나도 에러가 안 납니다
오타가 있으면 에러 없이 그냥 스타일이 적용이 안 됩니다.
<!-- 오타가 있어도 에러 없음 (그냥 적용 안 됨) -->
<div class="backgroud-blue-500">
<!-- 정상 -->
<div class="bg-blue-500">React에서 동적 클래스 이름 조합 시 주의
클래스 이름을 문자열로 조합하면 빌드에 포함이 안 됩니다:
// ❌ 이렇게 하면 빌드에 포함이 안 됩니다
const color = 'red';
<div className={`text-${color}-500`}>
// ✅ 완성된 클래스 이름을 사용해야 합니다
const cls = isError ? 'text-red-500' : 'text-green-500';
<div className={cls}>Tailwind가 빌드 시 소스 파일을 스캔해서 완성된 클래스 이름만 인식하기 때문이다.
기본 클래스에 없는 값을 쓰고 싶을 때
대괄호 안에 값을 직접 넣는 방법이 있습니다:
<div class="w-[342px]">
<div class="bg-[#1da1f2]">
<div class="text-[13px]">이걸 Arbitrary Values라고 부른다.
도움이 됐던 자료들
- play.tailwindcss.com — 설치 없이 바로 실습할 수 있어서 처음 감 잡을 때 많이 사용했습니다.
- tailwindcss.com/docs — 공식 문서인데 Ctrl+K로 클래스 검색이 가능합니다. 클래스 이름이 기억 안 날 때마다 찾아봤습니다.
- VS Code Tailwind CSS IntelliSense — 자동완성과 실제 CSS 값 미리보기가 돼서 편리합니다.
