Tailwind CSS 치트시트: 완전한 클래스 참조 가이드

Tailwind CSS는 마크업에서 직접 디자인을 구축할 수 있는 유틸리티 우선 CSS 프레임워크입니다. 커스텀 CSS를 작성하는 대신 미리 구축된 유틸리티 클래스를 적용합니다. 이 완전한 Tailwind CSS 치트 시트는 모든 주요 카테고리의 클래스와 CSS 출력을 다룹니다.

왜 Tailwind CSS인가? 왜 치트 시트가 필요한가?

Tailwind CSS에는 수백 개의 유틸리티 클래스가 있습니다. 명명 규칙이 직관적이지만, 빠른 참조 시트가 있으면 시간을 절약하고 생산성을 높일 수 있습니다.

간격: 패딩과 마진

Tailwind는 일관된 간격 스케일을 사용합니다. p- 또는 m- 뒤의 숫자는 rem 값에 매핑됩니다(0.25rem 곱하기). 음수 마진은 -m- 접두사를 사용합니다.

Directional Padding & Margin

<!-- Spacing examples -->
<div class="p-4">padding 1rem all sides</div>
<div class="px-6 py-3">horizontal 1.5rem, vertical 0.75rem</div>
<div class="mt-8 mb-4">top margin 2rem, bottom margin 1rem</div>
<div class="mx-auto max-w-lg">centered container</div>
<div class="-mt-4">negative top margin (overlap)</div>
<div class="space-x-4">children spaced 1rem horizontally</div>
<div class="space-y-2">children spaced 0.5rem vertically</div>

타이포그래피

글꼴 크기, 굵기, 줄 높이, 자간, 텍스트 정렬, 텍스트 색상 유틸리티.

글꼴 크기

글꼴 굵기

줄 높이

자간

텍스트 정렬

텍스트 색상

<!-- Text color examples -->
<p class="text-black">text-black → color: #000</p>
<p class="text-white">text-white → color: #fff</p>
<p class="text-gray-500">text-gray-500 → color: #6b7280</p>
<p class="text-red-600">text-red-600 → color: #dc2626</p>
<p class="text-blue-500">text-blue-500 → color: #3b82f6</p>
<p class="text-green-700">text-green-700 → color: #15803d</p>
<p class="text-transparent">text-transparent → color: transparent</p>
<p class="text-current">text-current → color: currentColor</p>

색상

Tailwind는 50(가장 밝음)에서 950(가장 어두움)까지의 숫자 색상 스케일을 사용합니다. 접두사: bg-는 배경, text-는 텍스트, border-는 테두리.

Color Prefixes

<!-- Available color palettes -->
slate, gray, zinc, neutral, stone    <!-- Grays -->
red, orange, amber, yellow           <!-- Warm -->
lime, green, emerald, teal           <!-- Green -->
cyan, sky, blue, indigo              <!-- Blue -->
violet, purple, fuchsia, pink, rose  <!-- Purple/Pink -->

<!-- Gradient example -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Gradient background
</div>

Flexbox

유연한 레이아웃을 구축하기 위한 포괄적인 flexbox 유틸리티.

Justify & Align

Gap

<!-- Flexbox layout examples -->
<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
  <div>Perfectly centered</div>
</div>

<!-- Navbar: logo left, links right -->
<nav class="flex justify-between items-center p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Responsive cards -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px]">Card 1</div>
  <div class="flex-1 min-w-[300px]">Card 2</div>
  <div class="flex-1 min-w-[300px]">Card 3</div>
</div>

Grid

2차원 레이아웃을 만들기 위한 CSS Grid 유틸리티.

Column & Row Span

<!-- Grid layout examples -->
<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>  <div>2</div>  <div>3</div>
  <div>4</div>  <div>5</div>  <div>6</div>
</div>

<!-- Responsive grid: 1 col mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Dashboard layout with spanning -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4">Header (full width)</div>
  <div class="col-span-1">Sidebar</div>
  <div class="col-span-3">Main content</div>
  <div class="col-span-2">Half width</div>
  <div class="col-span-2">Half width</div>
</div>

레이아웃: 너비, 높이, 컨테이너

요소 크기와 레이아웃 컨테이너를 제어하는 유틸리티.

Height & Max/Min

<!-- Layout examples -->
<div class="container mx-auto px-4">
  Centered responsive container
</div>

<div class="max-w-2xl mx-auto">
  Max-width 672px, centered
</div>

<div class="w-full h-screen">
  Full width, full viewport height
</div>

<div class="min-h-screen flex flex-col">
  <main class="flex-1">Content</main>
  <footer>Footer always at bottom</footer>
</div>

테두리와 모서리 둥글기

테두리 너비, 스타일, 둥근 모서리, 링 효과 유틸리티.

Border Radius

Ring (Outline)

그림자와 효과

박스 그림자, 불투명도, 블러 효과 유틸리티.

Opacity & Blur

트랜지션과 애니메이션

CSS 트랜지션과 키프레임 애니메이션 유틸리티.

Duration & Easing

Animations

<!-- Transition examples -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Smooth color change on hover
</button>

<div class="hover:scale-105 transition-transform duration-300 ease-out">
  Scale up on hover
</div>

<div class="hover:shadow-xl transition-shadow duration-300">
  Shadow appears on hover
</div>

<!-- Animation examples -->
<svg class="animate-spin h-5 w-5">...</svg>  <!-- Loading spinner -->
<span class="animate-ping absolute">...</span> <!-- Notification dot -->
<div class="animate-pulse bg-gray-300 h-4 rounded">...</div> <!-- Skeleton -->

반응형 접두사

Tailwind는 모바일 우선 반응형 디자인을 사용합니다. 유틸리티에 브레이크포인트 접두사를 붙여 적용합니다.

<!-- Mobile-first responsive design -->

<!-- Stack on mobile, side-by-side on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Main</div>
</div>

<!-- Responsive text size -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Visible on md and above</div>
<div class="block md:hidden">Visible only below md</div>

<!-- Responsive padding -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
  Padding grows with screen size
</div>

상태 변형

상태 변형 접두사를 사용하여 조건부로 스타일을 적용합니다.

<!-- State variant examples -->

<!-- Button with multiple states -->
<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-300
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200">
  Click me
</button>

<!-- Group hover: parent hover affects child -->
<div class="group p-4 hover:bg-blue-50 rounded-lg">
  <h3 class="group-hover:text-blue-600">Title</h3>
  <p class="group-hover:text-blue-400">Description</p>
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to light/dark mode
</div>

<!-- Peer: input state affects sibling -->
<input class="peer" type="text" placeholder="Email" />
<p class="invisible peer-invalid:visible text-red-500">
  Invalid email address
</p>

팁과 고급 사용법

내장 유틸리티로 충분하지 않을 때의 고급 기능.

임의 값

대괄호를 사용하여 커스텀 값 지정:

<!-- Arbitrary values with square brackets -->
<div class="w-[120px]">width: 120px</div>
<div class="h-[calc(100vh-80px)]">height: calc(100vh - 80px)</div>
<div class="bg-[#1a2b3c]">background: #1a2b3c</div>
<div class="text-[22px]">font-size: 22px</div>
<div class="grid-cols-[200px_1fr_200px]">custom grid template</div>
<div class="p-[clamp(1rem,3vw,3rem)]">responsive clamp padding</div>
<div class="text-[color:var(--brand)]">CSS variable color</div>
<div class="top-[var(--header-h)]">CSS variable position</div>

Important 수정자

유틸리티 앞에 !를 붙여 !important 추가:

<!-- Important modifier with ! prefix -->
<div class="!p-4">padding: 1rem !important</div>
<div class="!mt-0">margin-top: 0 !important</div>
<div class="!text-red-500">color: #ef4444 !important</div>

<!-- Useful for overriding third-party styles -->
<div class="external-widget !bg-transparent !border-none">
  Override library styles
</div>

@apply 지시어

반복되는 유틸리티 패턴을 커스텀 CSS 클래스로 추출:

/* In your CSS file — use @apply to extract components */
.btn {
  @apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
}

.btn-primary {
  @apply btn bg-blue-500 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6
         hover:shadow-lg transition-shadow duration-300;
}

/* Note: Tailwind recommends using utilities directly in HTML
   and only extracting with @apply for truly repeated patterns. */

자주 묻는 질문