Tailwind CSS 클래스 감지 원리: 동적 className이 빠지는 이유
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Tailwind CSS @apply 사용 기준: @utility와 custom variant 구분하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 를 어디에 쓰고 어디에서 멈춰야 하는지 정리합니다. 반복 버튼을 줄이는 문제, third-party 라이브러리 스타일 덮어쓰기, @utility로 프로젝트 전용 유틸리티를 만드는 기준, @custom-var…
더 읽기
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 변수를 모아두는 문법이 아니라, 프로젝트에서 사용할 유틸리티 클래스의 기준이 됩니다. 버튼 색상, 카드 모서리, …
더 읽기
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로 조정…
더 읽기
Tailwind CSS Grid 실무 레이아웃 정리: 카드 목록부터 대시보드까지
이 글에서 정리하는 내용 Tailwind CSS Grid를 카드 목록, 대시보드, 사이드바 레이아웃처럼 실제 화면에서 어떻게 선택하고 조합할지 정리합니다. 기준은 Tailwind CSS v4 문법에 두고, 클래스 암기보다 레이아웃을 판단하는 순서에 초점을 맞춥니다. …
더 읽기