텍스트 관련 클래스
- text-{색상}: 텍스트 색상 변경 (예: text-red-500).
- text-{크기}: 텍스트 크기 변경 (예: text-lg).
- font-{굵기}: 글꼴 굵기 변경 (예: font-bold).
배경 관련 클래스
- bg-{색상}: 요소의 배경 색상 변경 (예: bg-blue-200).
패딩 및 마진 클래스:
- p-{크기}: 패딩 설정 (예: p-4).
- m-{크기}: 마진 설정 (예: m-2).
테두리 관련 클래스:
- border: 요소에 테두리 추가.
- border-{색상}: 테두리 색상 변경 (예: border-blue-500).
레이아웃 관련 클래스:
- flex: 요소를 플렉스 컨테이너로 설정.
- justify-{방향}: 주 축 방향 정렬 (예: justify-center).
- items-{방향}: 교차 축 방향 정렬 (예: items-center).
폰트 아이콘 클래스:
- icon-{아이콘명}: 폰트 아이콘 사용 (예: icon-heart).
반응형 클래스:
- sm, md, lg, xl 등: 화면 크기에 따라 클래스를 적용하- 여 반응형 디자인을 구현할 수 있습니다 (예: lg:text-xl).
> 그리드 시스템 클래스:
- grid: 그리드 컨테이너로 설정.
- col-{숫자}: 열의 너비를 설정합니다 (예: col-6).
동적 클래스:
- hover, focus, active 등: 요소에 호버 또는 포커스될 때 스타일을 변경할 수 있습니다.
애니메이션 클래스:
- animate-{애니메이션명}: 애니메이션 효과를 추가할 수 있습니다.
