block / inline-block / inline | 디스플레이 타입 |
flex / inline-flex | 플렉스박스 |
grid / inline-grid | 그리드 |
hidden | 숨김 |
static / relative / absolute / fixed / sticky | 위치 |
top-0 / right-0 / bottom-0 / left-0 | 위치 값 |
inset-0 / inset-x-0 / inset-y-0 | inset 축약 |
z-10 / z-20 / z-50 | Z-index |
flex-row / flex-col | 방향 |
flex-wrap / flex-nowrap | 줄바꿈 |
justify-start / center / end / between / around | 주축 정렬 |
items-start / center / end / stretch | 아이템 정렬 |
self-start / center / end | 자기 정렬 |
flex-1 / flex-auto / flex-none | 플렉스 늘이기/줄이기 |
grow / grow-0 | 플렉스 늘이기 |
shrink / shrink-0 | 플렉스 줄이기 |
grid-cols-1 / grid-cols-2 / grid-cols-12 | 열 개수 |
grid-rows-1 / grid-rows-2 | 행 개수 |
col-span-2 / col-span-full | 열 스팬 |
row-span-2 | 행 스팬 |
gap-4 / gap-x-4 / gap-y-4 | 갭 |
col-start-1 / col-end-3 | 열 시작/끝 |
p-4 / px-4 / py-4 | 패딩 (전체/x/y) |
pt-4 / pr-4 / pb-4 / pl-4 | 패딩 (측면) |
m-4 / mx-4 / my-4 | 마진 (전체/x/y) |
mt-4 / mr-4 / mb-4 / ml-4 | 마진 (측면) |
-m-4 / -mt-4 | 음수 마진 |
mx-auto | 수평 중앙 |
space-x-4 / space-y-4 | 사이 간격 |
w-4 / w-1/2 / w-full / w-screen | 너비 |
h-4 / h-1/2 / h-full / h-screen | 높이 |
min-w-0 / min-w-full | 최소 너비 |
max-w-sm / max-w-md / max-w-lg / max-w-xl | 최대 너비 |
min-h-0 / min-h-screen | 최소 높이 |
max-h-full / max-h-screen | 최대 높이 |
size-4 / size-full | 너비 & 높이 |
font-sans / font-serif / font-mono | 폰트 패밀리 |
text-xs / text-sm / text-base / text-lg / text-xl | 폰트 크기 |
font-thin / font-normal / font-medium / font-bold | 폰트 두께 |
italic / not-italic | 폰트 스타일 |
tracking-tight / tracking-normal / tracking-wide | 자간 |
leading-tight / leading-normal / leading-loose | 행간 |
text-left / text-center / text-right / text-justify | 텍스트 정렬 |
text-black / text-white / text-gray-500 | 텍스트 색상 |
underline / line-through / no-underline | 텍스트 장식 |
uppercase / lowercase / capitalize | 텍스트 변환 |
truncate | 텍스트 자르기 |
line-clamp-2 / line-clamp-3 | 줄 제한 |
whitespace-nowrap / whitespace-pre | 공백 처리 |
bg-{color}-{shade} | 배경 색상 |
text-{color}-{shade} | 텍스트 색상 |
border-{color}-{shade} | 테두리 색상 |
bg-slate-100 / bg-slate-500 / bg-slate-900 | Slate 스케일 |
bg-red-500 / bg-blue-500 / bg-green-500 | 기본 색상 |
bg-transparent | 투명 |
bg-current | 현재 텍스트 색상 |
bg-cover / bg-contain / bg-auto | 배경 크기 |
bg-center / bg-top / bg-bottom | 배경 위치 |
bg-repeat / bg-no-repeat / bg-repeat-x | 배경 반복 |
bg-fixed / bg-local / bg-scroll | 배경 고정 |
bg-gradient-to-r / bg-gradient-to-b | 그라데이션 방향 |
from-blue-500 via-purple-500 to-pink-500 | 그라데이션 색상 |
opacity-0 / opacity-50 / opacity-100 | 불투명도 |
bg-opacity-50 | 배경 불투명도 |
text-opacity-75 | 텍스트 불투명도 |
bg-black/50 | 불투명도 있는 색상 |
border / border-2 / border-4 | 테두리 두께 |
border-t / border-r / border-b / border-l | 테두리 측면 |
border-solid / border-dashed / border-dotted | 테두리 스타일 |
rounded / rounded-md / rounded-lg / rounded-full | 테두리 반경 |
rounded-t / rounded-r / rounded-b / rounded-l | 반경 측면 |
divide-x / divide-y | 자식 구분 |
ring-2 / ring-blue-500 | 링 (포커스) |
shadow-sm / shadow / shadow-md / shadow-lg / shadow-xl | 박스 그림자 |
shadow-inner | 내부 그림자 |
shadow-none | 그림자 없음 |
blur / blur-sm / blur-lg | 블러 필터 |
brightness-50 / brightness-150 | 밝기 |
contrast-50 / contrast-150 | 대비 |
grayscale / sepia / invert | 색상 필터 |
sm: (640px) | 작은 화면 |
md: (768px) | 중간 화면 |
lg: (1024px) | 큰 화면 |
xl: (1280px) | 매우 큰 |
2xl: (1536px) | 2배 큰 |
md:flex lg:grid | 반응형 클래스 |
hover:bg-blue-600 | 호버 상태 |
focus:outline-none | 포커스 상태 |
active:bg-blue-700 | 활성 상태 |
disabled:opacity-50 | 비활성 상태 |
first:pt-0 / last:pb-0 | 첫/마지막 자식 |
odd:bg-gray-100 / even:bg-white | 홀수/짝수 |
group-hover:visible | 그룹 호버 |
peer-focus:ring | 피어 상태 |
dark:bg-gray-800 | 다크 모드 클래스 |
dark:text-white | 다크 텍스트 |
darkMode: "class" | 클래스 전략 (설정) |
darkMode: "media" | 미디어 전략 (설정) |
transition | 기본 전환 |
transition-all / transition-colors / transition-opacity | 전환 속성 |
duration-75 / duration-150 / duration-300 | 지속 시간 |
ease-linear / ease-in / ease-out / ease-in-out | 타이밍 함수 |
delay-75 / delay-150 | 지연 |
scale-50 / scale-100 / scale-150 | 스케일 |
rotate-45 / rotate-90 / -rotate-45 | 회전 |
translate-x-4 / translate-y-4 | 이동 |
skew-x-3 / skew-y-3 | 기울이기 |
origin-center / origin-top | 변환 원점 |
animate-spin / animate-ping / animate-pulse / animate-bounce | 애니메이션 |