CSS Tailwind CSS 클래스

[주인장]

a

absolute

설명: 요소의 위치(position) 를 절대 위치(absolute) 로 설정합니다.

효과: 요소가 가장 가까운 position이 지정된 부모 요소를 기준으로 배치되며, 일반적인 문서 흐름에서 제외됩니다.

b

bg-[#2c3e50]

설명: 요소의 배경색(background color) 을 사용자 정의 색상 값으로 설정합니다.

효과: 배경색이 #2c3e50 (어두운 네이비 계열 색상) 로 적용되어, 페이지 하단에 차분하고 안정적인 분위기를 형성합니다.

bg-black/60

설명: 요소의 배경색(background color) 과 투명도(opacity) 를 함께 설정합니다.

효과: 배경이 검은색(black) 60% 투명도로 적용되어, 아래 콘텐츠가 살짝 비치면서도 텍스트 가독성을 높여주는 오버레이 효과를 만듭니다.

bg-gradient-to-br

설명: 요소의 배경을 그라데이션(gradient) 으로 설정하며, 그라데이션의 방향을 지정합니다.

효과: 배경이 좌상단에서 우하단(bottom-right) 방향으로 흐르는 대각선 그라데이션으로 적용됩니다.

bg-slate-900

설명: 요소의 배경색(background color)을 설정합니다.

효과: 배경색을 Slate 계열의 900 레벨 색상으로 지정합니다. (매우 어두운 회청색, 거의 검은색에 가까운 색상입니다.)

bg-transparent

설명: 요소의 배경색(background color)을 투명(transparent)으로 설정합니다. 이는 background-color: transparent; CSS 속성과 같습니다.

효과: 요소가 배경색을 가지지 않고 아래에 있는 콘텐츠나 배경색이 그대로 비치도록 만듭니다. 이 클래스는 보통 요소에 이미 배경색이 설정되어 있을 때 해당 배경색을 명시적으로 제거하여 투명하게 만들 때 유용하게 사용됩니다.

bg-white/20

설명: 요소의 배경색(background color) 을 설정하며, 색상에 투명도(opacity) 를 함께 지정합니다.

효과: 배경이 흰색(white) 20% 투명도로 적용되어,
배경 색상이 은은하게 비치면서 부드러운 강조 효과를 제공합니다.

block

설명: 요소의 표시 유형(display)을 블록(Block) 레벨로 설정합니다.

효과: 이 <label> 요소가 사용 가능한 전체 가로 너비를 차지하도록 만듭니다.블록 요소는 위아래 수직 여백(margin-top, margin-bottom)을 정상적으로 인식하고 적용받게 되며, 다음 요소는 항상 새로운 줄에서 시작하게 됩니다.

border

설명: 요소에 테두리(border) 를 표시하도록 설정합니다.

효과: 기본 두께의 실선 테두리가 적용되어,
버튼의 경계가 명확하게 구분됩니다.

border-white

설명: 테두리의 색상(border-color) 을 설정합니다.

효과: 테두리가 흰색(white) 으로 표시되어,
어두운 배경이나 컬러 배경 위에서도 선명한 버튼 윤곽을 유지합니다.

border-2

설명: 요소의 테두리 두께(border-width) 를 설정합니다.

효과: 테두리가 2px 두께로 적용되어,
입력 필드의 경계가 더욱 또렷하게 표시됩니다.

c

cursor-pointer

설명: 마우스를 올렸을 때의 커서 모양(cursor) 을 설정합니다.

효과: 커서가 포인터(pointer) 로 변경되어,
해당 요소가 클릭 가능한 버튼임을 사용자에게 명확히 인식시킵니다.

d

dark:text-slate-300

설명: 다크 모드(Dark Mode)가 활성화되었을 때 적용될 텍스트 색상을 설정합니다.

효과: 사용자가 다크 모드를 사용할 경우, 텍스트 색상이 Slate 계열의 300 레벨(밝은 회청색)로 변경되어 어두운 배경 위에서 텍스트가 잘 보이도록 대비(Contrast)를 확보합니다.

disabled:opacity-60

설명: 요소가 비활성화(disabled 상태) 일 때 적용되는 스타일을 설정합니다.

효과: 비활성화된 경우 투명도(opacity)가 60% 로 낮아져, 사용자에게 현재 클릭할 수 없는 상태임을 시각적으로 명확히 전달합니다.

e

f

flex

설명: 해당 요소를 플렉스 컨테이너(Flex Container)로 설정합니다.

효과: 이 요소의 직계 자식 요소들(items)이 유연하게(flexible) 배치될 수 있도록 만듭니다. 이는 자식 요소들을 가운데 정렬하기 위한 필수 설정입니다.

flex-1

설명: 요소에 flex: 1 1 0%; CSS 속성을 적용하는 유틸리티 클래스입니다. 이는 플렉스 컨테이너(부모 요소) 내부에서 해당 요소가 자랄 수 있는 비율(flex-grow: 1), 줄어들 수 있는 비율(flex-shrink: 1), 그리고 기본 너비(flex-basis: 0%)를 설정합니다.

효과: 플렉스 컨테이너 내부에서 다른 플렉스 아이템이 차지하고 남은 공간을 이 요소가 균등하게 채우도록 만듭니다. 특히, <Input>과 같은 요소에 이 클래스를 적용하면, 옆에 있는 버튼이나 다른 요소의 크기를 제외한 나머지 사용 가능한 모든 가로 공간을 인풋 필드가 자동으로 차지하도록 확장됩니다.

flex-col

설명: 플렉스 아이템의 배치 방향(주 축)을 수직(열, Column)으로 설정합니다.

효과: 모바일과 같은 작은 화면에서는 헤더의 자식 요소들이 위에서 아래로 쌓이도록 만듭니다.

flex-shrink-0

설명: Flexbox 레이아웃에서 요소의 축소 비율(flex-shrink) 을 설정합니다.

효과: 부모 컨테이너의 공간이 부족해지더라도 해당 요소는 크기가 줄어들지 않도록(shrink 되지 않도록) 고정됩니다.
즉, 다른 요소들이 줄어들어도 이 요소는 원래 크기를 유지합니다.

flex-wrap

설명: Flexbox에서 자식 요소들의 줄바꿈(wrap) 허용 여부를 설정합니다.

효과: 한 줄에 모든 요소가 들어가지 않을 경우, 자식 요소들이 다음 줄로 자동으로 내려가 배치됩니다.
→ 반응형 환경에서 메뉴, 버튼, 태그 목록 구성에 매우 유용합니다.

font-medium

설명: 텍스트의 글자 두께(font-weight) 를 설정합니다.

효과: 기본(normal)보다 약간 굵은 medium(500) 두께가 적용되어, 강조는 되면서도 과하지 않은 버튼 텍스트를 표현합니다.

from-[#667eea]

설명: 그라데이션의 시작 색상(from) 을 지정합니다.

효과: 그라데이션이 #667eea (밝은 보라빛 블루 계열 색상) 에서 시작됩니다.

g

gap-2

설명: 플렉스 컨테이너(여기서는 flex가 적용된 div) 내의 자식 요소들 사이에 일관된 간격(Gap)을 가로 및 세로 방향 모두에 추가합니다. 2는 Tailwind CSS의 spacing scale에서 정의된 작은 크기(일반적으로 $0.5\text{rem}$ 또는 $8\text{px}$)를 나타냅니다.

효과: div 안에 들어있는 모든 항목(예: 버튼, 입력 필드 등)들이 서로 수평 및 수직 방향으로 $8\text{px}$씩 떨어져 보이게 만듭니다.

grid

설명: 요소의 레이아웃 방식을 Grid 레이아웃(display: grid) 으로 설정합니다.

효과: 자식 요소들을 행과 열 기반의 격자 구조로 배치할 수 있으며, 복잡한 레이아웃을 명확하고 일관되게 구성할 수 있습니다.

grid-cols-1

설명: Grid 레이아웃에서 열(column) 개수를 설정합니다.

효과: 기본 화면(모바일 포함)에서는 자식 요소들이 1개의 열로 세로 방향 배치됩니다.
→ 모바일 친화적인 단일 컬럼 레이아웃입니다.

h

hover:opacity-100

설명: 마우스를 올렸을 때(hover 상태)의 투명도를 설정합니다.

효과: 호버 시 투명도가 100% 로 변경되어, 요소가 부드럽게 나타나는 효과를 제공합니다.

hover:-translate-y-1

설명: 마우스를 올렸을 때(hover 상태) 요소를 세로 방향으로 이동시키는 변형 효과를 설정합니다.

효과: 버튼이 위쪽으로 0.25rem(4px) 만큼 이동하여, 마치 살짝 떠오르는 듯한 인터랙션 효과를 제공합니다.

hover:text-[#667eea]

설명: 마우스를 올렸을 때(hover 상태)의 텍스트 색상을 설정합니다.

효과: 텍스트 색상이 #667eea (보라빛 블루 계열) 로 변경되어, 기본 배경색과 조화로운 컬러 전환 효과를 만듭니다.

i

items-center

설명: 플렉스 컨테이너(여기서는 flex가 적용된 요소) 내의 자식 요소들을 교차 축(Cross Axis)을 따라 가운데 정렬합니다.

효과: 플렉스 항목(items)들을 수직 방향으로 가운데에 배치합니다.

items-start

설명: 플렉스 컨테이너 내의 자식 요소들을 교차 축(Cross Axis)을 따라 시작점에 정렬합니다.

효과: 자식 요소들을 수직 방향으로 컨테이너의 맨 위에 배치합니다.

j

sm:justify-between

설명: sm 화면 이상에서 주 축(Main Axis)을 따라 최대 간격을 두고 정렬합니다.

효과: 자식 요소들을 컨테이너의 양 끝에 배치하고, 요소들 사이에 최대한의 공간을 균등하게 배분합니다.

justify-center / end

설명: 플렉스 컨테이너 내의 자식 요소들을 주 축(Main Axis)을 따라 가운데 정렬합니다.

효과: 플렉스 항목(items)들을 수평 방향으로 가운데에 배치합니다.

💡 요약: flex, items-center, justify-center 세 클래스가 결합되어, 이 컨테이너 안에 들어있는 내용물을 화면 정중앙에 배치하는 역할을 수행합니다.

k

l

items-start

설명: Flexbox의 교차 축(cross axis) 기준 정렬 방식을 설정합니다.

효과: 자식 요소들이 세로 방향의 시작 지점(top) 에 정렬됩니다. 각 요소의 높이가 다를 경우에도 윗부분이 기준선에 맞춰 정렬됩니다.

m

max-w-md

설명: 요소의 최대 너비(maximum width)를 medium(중간) 크기로 설정합니다.

참고: Tailwind CSS에서 md는 보통 28rem 또는 448px에 해당하는 고정된 값으로 정의되어 있습니다.

효과: 요소의 너비는 w-full에 의해 부모를 채우려 하지만, 실제 너비가 이 md 값을 초과하지 않도록 제한합니다. 즉, 화면이 매우 클 때 요소가 너무 옆으로 늘어지는 것을 방지하고 적절한 가독성을 유지하도록 도와줍니다.

max-w-2xl

설명: 요소의 최대 가로 너비(max-width) 를 설정합니다.

효과: 요소의 최대 너비를 2xl 크기(약 42rem ≈ 672px) 로 제한하여, 화면이 넓어져도 콘텐츠가 너무 넓게 퍼지지 않도록 합니다.
이를 통해 가독성과 레이아웃 안정성이 향상됩니다.

md:grid-cols-2

설명: 중간 크기 화면(md 브레이크포인트) 이상에서 Grid의 열(column) 개수를 설정합니다.

효과: 화면 너비가 md(768px) 이상이 되면, 자식 요소들이 2개의 열로 나뉘어 배치됩니다.
→ 모바일에서는 1열, 태블릿·데스크톱에서는 2열 레이아웃이 됩니다.

md:grid-cols-[2fr,1.2fr]

설명: Medium breakpoint ($768\text{px}$) 이상의 화면에서 해당 요소의 그리드 레이아웃을 정의하며, 두 개의 열(Column)을 생성하고 각 열의 너비 비율을 지정합니다. [2fr, 1.2fr]는 CSS Grid의 사용자 정의 값 문법을 사용하여, 첫 번째 열은 2 비율(2fr)로, 두 번째 열은 1.2 비율(1.2fr)로 너비를 설정합니다.

효과: 화면이 $768\text{px}$보다 커지면, 이 컨테이너는 그리드로 작동하며 내부 자식 요소를 왼쪽 열은 오른쪽 열보다 약 1.67배 넓게 차지하도록 배치하여, 주로 메인 콘텐츠 영역과 사이드바 영역을 비대칭적으로 분할할 때 유용하게 사용됩니다.

min-h-[70vh]

설명: 요소의 최소 높이(min-height) 를 사용자 정의 값으로 설정합니다.

효과: 요소의 최소 높이가 뷰포트 높이의 70%(70vh) 로 지정되어, 콘텐츠가 적더라도 해당 영역이 충분한 세로 공간을 확보합니다.
→ 로딩 화면, 빈 상태(empty state), 중앙 강조 섹션에 자주 사용됩니다.

min-h-screen

- 설명: 요소의 최소 높이(minimum height)를 뷰포트(viewport) 높이와 같게 설정합니다.

- 효과: 이 요소를 포함하는 컨테이너가 화면 전체 높이(스크롤 없이 보이는 영역)를 최소한으로 차지하도록 만듭니다.

ml-auto

설명: 요소의 왼쪽 마진(margin-left) 을 자동(auto)으로 설정합니다.

효과: Flex 컨테이너 안에서 해당 요소가 오른쪽 끝으로 밀려 배치됩니다. → 네비게이션, 카드 헤더에서 우측 정렬 영역을 만들 때 자주 사용됩니다.

mx-auto

설명: 요소의 좌우 마진(margin-left, margin-right) 을 자동(auto)으로 설정합니다.

효과: 요소가 가로 방향으로 중앙 정렬됩니다. 보통 max-width가 설정된 컨테이너와 함께 사용되어, 화면 중앙에 콘텐츠를 배치할 때 활용됩니다.

n

o

object-cover

설명: 이미지 또는 비디오 요소의 콘텐츠 맞춤 방식(object-fit) 을 설정합니다.

효과: 콘텐츠의 비율(aspect ratio)을 유지한 채 부모 영역을 가득 채우도록 확대/축소됩니다. 이 과정에서 영역을 채우기 위해 일부 영역이 잘릴 수 있음이 특징입니다.

overflow-hidden

설명: 요소의 오버플로우(overflow) 처리 방식을 설정합니다.

효과: 요소 영역을 벗어나는 콘텐츠가 보이지 않도록 잘림 처리됩니다. 특히 둥근 모서리와 함께 사용 시, 내부 이미지나 배경이 모서리를 넘치지 않고 깔끔하게 유지됩니다.

p

px-5

설명: 요소의 가로 방향 패딩(padding-left, padding-right) 을 설정합니다.

효과: 좌우에 각각 1.25rem(20px) 만큼의 내부 여백이 생겨, 콘텐츠가 화면 가장자리에 너무 붙지 않도록 합니다.
특히 모바일·태블릿 환경에서 여백 확보에 효과적입니다.

py-4

설명: 요소의 세로 방향 패딩(padding-top, padding-bottom) 을 설정합니다.

효과: 상단과 하단에 각각 1rem × 4 = 16px 만큼의 여백이 생겨, 네비게이션 바의 높이가 여유 있게 확보됩니다.

q

r

rounded-md

설명: 요소의 네 모서리를 둥글게(border-radius) 처리하며, 크기는 medium(md)으로 설정합니다.

효과: div 박스나 컴포넌트의 모서리가 적당히 둥글게 처리되어 부드러운 시각적 효과를 제공합니다.

s

shadow-md

설명: 요소에 중간 크기(medium)의 그림자(box-shadow) 를 적용합니다.

효과: 네비게이션 바 아래쪽에 은은한 그림자가 생겨, 배경과 구분되고 입체감이 강조됩니다.

sm:flex-row

설명: Small breakpoint ($640\text{px}$) 이상의 화면에서 배치 방향을 수평(행, Row)으로 변경합니다.

효과: 화면이 커지면 헤더의 자식 요소들이 왼쪽에서 오른쪽으로 나란히 배치되도록 변경합니다.

sm:items-end

설명: sm 화면 이상에서 교차 축(Cross Axis)을 따라 끝 지점에 정렬합니다.

효과: 자식 요소들을 수직 방향으로 컨테이너의 맨 아래(바닥)에 맞춥니다. (예: 제목은 위에, 보조 텍스트는 아래에 정렬될 때 사용될 수 있습니다.)

space-y-4

설명: 요소의 직계 자식 요소들 사이에 수직 방향(Y축)으로 일관된 간격을 추가합니다. 4는 Tailwind CSS의 spacing scale에서 정의된 크기(일반적으로 1rem 또는 16px)를 나타냅니다.

효과: 이 클래스가 적용된 <CardContent> 내부에 있는 모든 요소(예: 텍스트, 버튼, 다른 Div 등) 사이에 위와 아래로 균일한 여백이 자동으로 생성되어, 항목들이 서로 떨어져 보이게 만듭니다.

작동 방식: 이 클래스는 첫 번째 자식 요소를 제외한 나머지 자식 요소들의 윗쪽 여백(margin-top)을 지정된 크기(4)로 설정하여 간격을 만듭니다.

sticky

설명: 요소의 위치(position)를 sticky 로 설정합니다.

효과: 스크롤 시 해당 요소가 지정된 위치에 도달하면 화면에 고정되며, 일반 흐름을 유지하다가 고정되는 동작을 합니다.

t

text-slate-600

설명: 요소 내 텍스트의 색상(color)을 Slate 계열의 600 레벨 색상으로 설정합니다.

효과: 라벨 텍스트가 약간 어둡고 부드러운 회청색으로 표시되어 본문 텍스트보다 덜 강조되게 합니다. (라이트 모드에서 적용)

text-sm

설명: 요소 내 텍스트의 글꼴 크기(font size)를 작게(small) 설정합니다.

효과: 라벨 텍스트의 크기가 기본 크기보다 작아져, 정보가 많지 않은 레이블에 적합한 시각적 계층을 제공합니다.

to-[#764ba2]

설명: 그라데이션의 끝 색상(to) 을 지정합니다.

효과: 그라데이션이 #764ba2 (보라색 계열의 색상) 으로 끝나며, 시작 색상과 자연스럽게 이어집니다.

top-0

설명: sticky 또는 fixed 요소의 상단 기준 위치(top) 를 설정합니다.

효과: 요소가 화면의 최상단(top: 0) 에 고정되어 스크롤해도 항상 위에 위치합니다.

transform

설명: 요소에 CSS 변형(transform) 을 사용할 수 있도록 활성화합니다.

효과: 이동, 회전, 크기 변화와 같은 transform 계열 효과가 정상적으로 적용됩니다.

transition

설명: 스타일 변화 시 부드러운 전환 효과(transition) 를 활성화합니다.

효과: 색상, 위치, 변형 등의 변화가 즉각적이지 않고 자연스럽게 적용됩니다.

u

w

w-full

설명: 요소의 너비(width)를 100%로 설정합니다.

효과: 이 요소를 포함하는 부모 컨테이너의 너비를 완전히 채우도록 만듭니다.

x

y

z

z-50

설명: 요소의 쌓임 순서(z-index) 를 설정합니다.

효과: z-index 값을 50으로 지정하여, 다른 요소들보다 항상 위에 표시되도록 합니다.
(모달, 드롭다운, 콘텐츠에 가려지지 않도록 보장)