Tailwind CSS @apply 사용 기준: @utility와 custom variant 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 를 어디에 쓰고 어디에서 멈춰야 하는지 정리합니다. 반복 버튼을 줄이는 문제, third-party 라이브러리 스타일 덮어쓰기, @utility로 프로젝트 전용 유틸리티를 만드는 기준, @custom-var…
더 읽기
hebi_admin
Tailwind CSS arbitrary value 차이: 대괄호 문법 사용 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Arbitrary Value와 Arbitrary Variant를 구분합니다. 둘 다 대괄호 문법을 쓰지만 해결하는 문제는 다릅니다. Arbitrary Value는 기본 scale 밖의 값을 직접 넣는 방식이…
더 읽기
Tailwind CSS transition, animation, motion-reduce 사용 기준 정리
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로를 정리합니다. 버튼 hover처럼 상태가 바뀌는 움직임로딩 스피너처럼 시간 흐름을 가진 움직임, 사용자의 모션 감소 설정을 고려해야 하는 움직임을 구분해 봅니다. 움직임 효과를 넣을 때 먼저 나눌 기준 …
더 읽기
Tailwind CSS @theme 사용법: 변수와 디자인 토큰 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Theme Variables와 Design Token을 구분해 정리합니다. 는 단순히 CSS 변수를 모아두는 문법이 아니라, 프로젝트에서 사용할 유틸리티 클래스의 기준이 됩니다. 버튼 색상, 카드 모서리, …
더 읽기
TanStack Query staleTime gcTime 차이: 캐시 시간 기준
이 글에서 정리하는 내용 TanStack Query v5 기준으로 staleTime과 gcTime의 차이를 정리합니다. 캐시가 남아 있는데도 요청이 다시 나가는 이유, v4의 cacheTime이 v5에서 gcTime으로 바뀐 이유, 실제 React 화면에서 두 옵션을 …
더 읽기
TanStack Query queryFn 사용법: 데이터 요청 로직 분리하기
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기
Tailwind CSS dark 사용법: 다크 모드 구현 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 dark: variant를 사용할 때 먼저 정해야 하는 기준을 정리합니다. 다크 모드는 어두운 색을 몇 개 추가하는 작업이 아니라, 라이트 모드와 같은 정보 구조를 다른 조도 환경에서도 읽히게 다시 맞추는 …
더 읽기
Tailwind CSS 상태 variant 사용법: hover focus aria data 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로, variant를 정리합니다. 버튼, 입력창, 탭, 아코디언처럼 상태가 자주 바뀌는 UI에서 어떤 variant를 먼저 써야 하는지 판단 기준을 잡는 데 초점을 둡니다. 상태 variant는 클래스 암기…
더 읽기
Tailwind CSS group peer has 차이: 상태 기준으로 고르는 방법
Tailwind CSS group, peer, has-*를 고르는 기준 Tailwind CSS에서 상태 스타일링이 헷갈리는 순간은 대부분 클래스 이름 때문이 아니라, 상태가 발생하는 요소와 실제로 바꾸고 싶은 요소가 다르기 때문에 생깁니다.는 각각 부모, 형제, 자식 …
더 읽기
Tailwind CSS 반응형 클래스 사용법: sm md lg 기준 잡기
이 글에서 정리하는 내용 Tailwind CSS의 반응형 클래스를 화면 이름이 아니라 스타일이 바뀌기 시작하는 너비 기준으로 정리합니다. 접두사 없는 기본 클래스에서 출발해, 카드 리스트·검색 필터·섹션 여백처럼 실제 화면에서 달라지는 부분만 breakpoint로 조정…
더 읽기