Tailwind CSS 상태 variant 사용법: hover focus aria data 기준 잡기
Tailwind CSS에서 hover, focus-visible, disabled, aria, data variant를 어떤 기준으로 선택해야 하는지 버튼, 입력창, 탭, 아코디언 UI 예시로 정리합니다.
Tailwind CSS의 실제 프로젝트 적용, 연동, 상태 흐름과 실무 문제 해결 글을 정리합니다.
총 13개의 글
Tailwind CSS에서 hover, focus-visible, disabled, aria, data variant를 어떤 기준으로 선택해야 하는지 버튼, 입력창, 탭, 아코디언 UI 예시로 정리합니다.
Tailwind CSS Grid를 카드 목록, 대시보드, 사이드바 레이아웃 기준으로 정리합니다. grid-cols, gap, col-span, 반응형 클래스 조합을 실무 레이아웃 관점에서 살펴봅니다.
긴 className을 그대로 둘 때와 상수·컴포넌트·variant로 나눌 때를 구분하고, disabled·clsx·tailwind-merge·CVA 적용 순서를 정리합니다.