과거에는 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>
