tailwind - 접두사 정리

 

css를 지피티에만 의존할 수는 없군..

나도 어느정도는 할 줄 알아야 하니까, 자주 쓸 것들 정리해두기 🍑

 

추가될 때 마다 와서 정리해야지 !

---

Tailwind에서 **자주 쓰이는 접두사(클래스 prefix)**랑 기능을 카테고리별로 총정리

🎨 색상 관련

text-	글자 색상	text-gray-800
bg-	배경 색상	bg-blue-100
border-	테두리 색상	border-red-300
placeholder-	input 안 placeholder 색상	placeholder-gray-400
divide-	자식 요소 사이의 구분선 색	divide-gray-200

 

🔡 텍스트 관련

text-	글자 크기/색	text-sm, text-white
font-	폰트 굵기	font-bold, font-light
leading-	줄 간격(line-height)	leading-relaxed
tracking-	자간(letter-spacing)	tracking-wide
uppercase	대문자 변환	uppercase
line-clamp-	줄 수 제한 (ellipsis)	line-clamp-2

 

📏 여백 (Spacing)

p-	패딩 전체	p-4, px-2, py-1
m-	마진 전체	m-2, mt-4, ml-1
gap-	그리드/플렉스 간격	gap-4, gap-x-2

p, m 뒤에 x, y, t, b, l, r로 방향 지정:

• x: 좌우, y: 상하
• t: top, b: bottom, l: left, r: right

 

📐 사이즈

w-	너비	w-1/2, w-full, w-[300px]
h-	높이	h-10, h-screen
min-w-, max-w-	최소/최대 너비	max-w-md
min-h-, max-h-	최소/최대 높이	min-h-[100px]

 

📦 박스 스타일

border	테두리 두께/색	border, border-2, border-gray-400
rounded-	모서리 둥글기	rounded, rounded-lg, rounded-t-md
shadow-	그림자	shadow, shadow-md, shadow-lg
ring-	포커스 외곽선	ring, ring-2, ring-blue-400

 

🎯 정렬/배치

flex, grid	레이아웃 시작	flex, grid
justify-	주축 정렬 (가로)	justify-center, justify-between
items-	교차축 정렬 (세로)	items-center, items-start
text-	텍스트 정렬	text-center, text-right
self-	자기 자신 정렬	self-end

 

🖱️ 상태 기반

hover:	마우스 올렸을 때 스타일	hover:bg-blue-200
focus:	포커스 (입력창 클릭 등)	focus:ring
disabled:	비활성화 상태일 때	disabled:opacity-50
active:	클릭 중일 때	active:bg-blue-600

 

📱 반응형 접두사

sm:	≥ 640px
md:	≥ 768px
lg:	≥ 1024px
xl:	≥ 1280px
2xl:	≥ 1536px

예: md:flex, lg:w-1/2 → 특정 화면 크기 이상에서만 스타일 적용

 예시 조합

<div className="bg-[#cecece] text-sm text-gray-700 p-4 rounded-lg shadow-md md:w-1/2">
  Hello Tailwind!
</div>