Tailwind CSS Reference

Tailwind CSS 유틸리티 레퍼런스

29개 결과

Tailwind CSS Reference 소개

Tailwind CSS 레퍼런스는 Tailwind CSS 유틸리티 클래스를 검색할 수 있는 빠른 참조 가이드로, 레이아웃, 타이포그래피, 색상, 간격, 반응형, 다크모드의 6개 카테고리로 구성되어 있습니다. 각 항목에는 유틸리티 클래스 이름 또는 패턴, 기능 설명, 사용법을 보여주는 HTML 스니펫이 포함되어 있습니다. Tailwind CSS는 커스텀 CSS 파일을 작성하지 않고 마크업에서 직접 디자인을 구축할 수 있는 유틸리티 우선 CSS 프레임워크이며, 이 레퍼런스는 프론트엔드 개발자가 가장 자주 사용하는 클래스를 다룹니다.

Tailwind CSS는 React, Next.js, Vue, Svelte, 순수 HTML로 구축된 사이트에서 사용되며 현대 웹 애플리케이션 스타일링의 지배적인 접근 방식이 되었습니다. 시맨틱 클래스명과 별도의 CSS 규칙을 작성하는 대신, flex, items-center, text-lg, bg-blue-500과 같은 작고 단일 목적의 유틸리티 클래스를 조합합니다. 이 레퍼런스는 완전한 유틸리티 어휘를 다룹니다: 플렉스박스와 CSS 그리드 레이아웃, 포지셔닝(absolute, relative, fixed, sticky), 타이포그래피(폰트 크기, 두께, 줄 높이), 투명도 수정자가 있는 전체 색상 팔레트, 패딩/마진/갭 간격, 너비/높이 사이징, 모서리 둥글기, 반응형 브레이크포인트 접두사 등입니다.

flex items-center justify-center로 콘텐츠를 중앙 정렬하거나, grid-cols-12와 col-span으로 반응형 12열 그리드를 만들거나, hover:bg-blue-600으로 호버 상태를 적용하거나, dark: 접두사로 다크 모드를 구현하거나, from/to/via 색상 스톱으로 그라디언트 배경을 빌드하거나, animate-fade-in으로 입장 애니메이션을 추가할 때, 이 치트 시트는 정확한 클래스 조합을 제공합니다. 유틸리티 클래스로 사고하며 컴포넌트 개발 중 즉각적인 검색이 필요한 프론트엔드 개발자를 위해 설계되었습니다.

주요 기능

flex, inline-flex, flex-col/flex-row 방향, justify-*와 items-* 정렬을 포함한 플렉스박스 레이아웃 유틸리티, 그리고 grid-cols-*, col-span-*, 갭 간격을 가진 CSS 그리드
방향 배치(top-0, right-0, bottom-4)가 있는 absolute, relative, fixed, sticky 포지셔닝 시스템, 중앙 콘텐츠 레이아웃을 위한 container와 max-w-*
text-xs부터 text-9xl까지의 타이포그래피 유틸리티, 폰트 두께 클래스(font-thin~font-black), 줄 높이(leading-*), 자간(tracking-*), 텍스트 정렬, line-clamp-*을 이용한 텍스트 잘림
text-*와 bg-* 색상 클래스, 입력 스타일링을 위한 border와 ring 색상, 투명도 수정자(bg-black/50), from-*, via-*, to-* 색상 스톱을 이용한 그라디언트 배경을 포함한 전체 색상 시스템
모든 방향의 p-*/m-* 패딩/마진, 플렉스/그리드용 gap-*, 분수 및 뷰포트 단위를 포함한 w-*/h-* 너비/높이, 미세한 것부터 완전한 원형까지의 rounded-* 모서리 둥글기를 포함한 간격과 사이징
모바일 우선 브레이크포인트 접두사(sm:, md:, lg:, xl:, 2xl:), 상태 변형(hover:, focus:, active:), 부모-자식 및 형제 기반 상태 스타일링을 위한 group-hover:/peer-*를 포함한 반응형 디자인
dark: 접두사를 이용한 다크 모드 지원, darkMode 설정 옵션(class vs media), 부드러운 속성 변화를 위한 transition-* 유틸리티, spin/bounce/pulse/ping 효과를 위한 animate-*
높이감 효과를 위한 shadow-sm부터 shadow-2xl까지의 그림자 유틸리티, 카드, 버튼, 입력, 플로팅 액션 버튼 등 일반적인 UI 패턴을 보여주는 실전 예제

자주 묻는 질문

Tailwind CSS의 반응형 브레이크포인트 시스템은 어떻게 작동하나요?

Tailwind는 모바일 우선 접근 방식을 사용합니다. 접두사 없는 유틸리티는 모든 화면 크기에 적용됩니다. 접두사 유틸리티(sm:, md:, lg:, xl:, 2xl:)는 해당 브레이크포인트 이상에서 적용됩니다. 예를 들어 grid-cols-1 md:grid-cols-2 lg:grid-cols-3은 모바일에서 1열, 768px부터 2열, 1024px부터 3열을 만듭니다. 기본 브레이크포인트는 sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)입니다. max-width 미디어 쿼리가 필요 없으며, 모바일용 기본 스타일을 설정하고 더 큰 브레이크포인트에서 재정의합니다.

Tailwind의 darkMode "class"와 "media"의 차이점은 무엇인가요?

darkMode: "media"에서는 dark: 유틸리티가 사용자의 OS 설정(prefers-color-scheme: dark)에 따라 활성화됩니다. darkMode: "class"에서는 html이나 body 요소에 dark 클래스가 있을 때만 활성화되어 JavaScript를 통한 수동 제어가 가능합니다. "class" 전략이 더 유연한데, 사용자가 OS 설정과 독립적으로 다크 모드를 토글할 수 있고 localStorage나 쿠키에 설정을 저장할 수 있기 때문입니다.

요소를 수평 및 수직으로 중앙 정렬하는 방법은?

가장 일반적인 접근 방식은 부모 컨테이너에 flex items-center justify-center를 사용하는 것입니다. 전체 뷰포트 중앙 정렬에는 h-screen을 추가합니다: <div class="flex items-center justify-center h-screen">. 블록 요소의 수평 중앙 정렬에는 너비 제약과 함께 mx-auto를 사용합니다: <div class="mx-auto max-w-lg">. 그리드 레이아웃에서는 place-items-center를 사용합니다: <div class="grid place-items-center h-screen">.

Tailwind CSS에서 그라디언트는 어떻게 사용하나요?

그라디언트 방향에 bg-gradient-to-{direction}을 적용합니다(r은 오른쪽, l은 왼쪽, t은 위, b은 아래, br은 오른쪽 아래 등). 그런 다음 from-{color}, via-{color}(선택적 중간), to-{color}으로 색상 스톱을 설정합니다. 예: bg-gradient-to-r from-blue-500 to-purple-500는 왼쪽에서 오른쪽으로 파란색에서 보라색 그라디언트를 만듭니다. 오버레이에는 절대 위치 요소에 bg-gradient-to-b from-transparent to-black/50을 사용합니다.

group-hover 패턴은 무엇이며 어떻게 작동하나요?

group-hover 패턴은 부모 요소의 호버에 자식 요소가 반응하게 합니다. 부모 컨테이너에 group 클래스를 추가하고 자식에 group-hover: 접두사 유틸리티를 사용합니다. 예: <div class="group"><p class="group-hover:text-blue-500">부모가 호버되면 파란색으로 변합니다</p></div>. 마찬가지로 peer-*는 형제 요소의 상태에 따라 다른 형제를 스타일링합니다: <input class="peer" /><p class="hidden peer-focus:block">입력이 포커스되면 표시됩니다</p>.

임의의 값으로 간격과 사이징을 처리하는 방법은?

Tailwind는 일관된 간격 스케일을 제공합니다: 1 = 0.25rem(4px), 2 = 0.5rem, 4 = 1rem, 8 = 2rem 등. 기본 스케일에 없는 값에는 대괄호 임의 값 구문을 사용합니다: p-[13px], w-[calc(100%-2rem)], mt-[3.5rem]. w-1/2, w-1/3, w-2/5 같은 분수 너비는 반응형 레이아웃에 사용 가능합니다. 특수 값으로는 w-full(100%), h-screen(100vh), min-h-screen, max-w-prose(가독성을 위한 65ch)가 있습니다.

Tailwind CSS에서 트랜지션과 애니메이션은 어떻게 작동하나요?

CSS 트랜지션을 활성화하려면 transition-{property}(transition-all, transition-colors, transition-opacity, transition-transform)를 추가합니다. duration-{ms}(duration-150, duration-300, duration-500)로 지속 시간을 제어하고 ease-{type}(ease-in, ease-out, ease-in-out)으로 이징을 설정합니다. 내장 애니메이션으로는 animate-spin(연속 회전), animate-bounce(수직 바운스), animate-pulse(투명도 페이드), animate-ping(확장 링)이 있습니다. 호버 상태와 결합합니다: hover:scale-105 transition-transform duration-200.

일반적인 UI 컴포넌트를 빌드하는 권장 접근 방식은?

카드에는 rounded-xl border border-gray-200 p-5 dark:border-gray-700에 shadow-sm을 사용합니다. 버튼에는 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700에 transition-colors를 결합합니다. 입력에는 w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500을 사용합니다. 다크 모드 호환성을 위해 항상 dark: 변형을 포함하세요. @apply 디렉티브는 진정으로 재사용 가능한 컴포넌트 스타일을 추출할 때만 컴포넌트 라이브러리에서 사용합니다.