- 발행일
TV에 연결하니 테두리가 안 보였다 — 열흘 전 "일부러 안 고침"을 94개 파일에서 뒤집은 기록
열흘 전 대비 감사에서 회색 테두리 260곳은 장식이라 일부러 안 고쳤습니다. 그런데 고해상도 TV에 HDMI로 확장해 띄우니 표 격자와 카드 테두리가 통째로 사라졌어요. 장식은 gray-500, 관계를 나타내는 연결선은 gray-600으로 94개 파일을 올렸고, 그때 세워 둔 기준이 어디서 틀렸는지를 적습니다.
Css
Css
- 발행일
버튼 기본값이 w-full이었다 — 되돌리는 코드 61곳이 기본값을 고를 근거였다
이 프로젝트의 모든 button은 base 레이어에서 w-full을 물려받고 있었습니다. 그래서 버튼을 놓는 자리마다 w-auto로 되돌리고 있었고, 그게 61곳이었어요. 기본값을 글자 폭으로 뒤집고 되돌리기를 전부 지웠습니다. 예외가 규칙보다 많으면 규칙이 틀린 겁니다.
- 발행일
Tailwind v3에서 v4로 170개 파일을 옮겼다 — 설정 파일을 지우는 게 핵심이었다
v4 전환은 버전을 올리는 일이 아니라 토큰의 원천을 JS 설정에서 CSS로 옮기는 일이었습니다. tailwind.config.js를 지우면서 safelist가 조용히 사라졌고, @layer components에 둔 클래스는 @apply 대상이 아니게 됐고, 마크업에 둔 기본 상태가 컴포넌트 규칙을 이기기 시작했어요. 없던 브레이크포인트를 살리자 8개 화면이 그제야 다열이 됐습니다.
- 발행일
Tailwind v3에서 v4 CSS-first @theme로 전환하면서 깨지고 다시 메운 기록
tailwind.config.js 기반 v3에서 CSS 안에서 @theme로 토큰을 정의하는 v4로 전환하면서 발생한 회귀와 패치 과정을 정리한 회고입니다.
- 발행일
네비 하위 메뉴 호버 끊김을 sub-list height 통일로 해결한 기록
드롭다운 네비에서 상위 메뉴에서 하위 메뉴로 마우스를 옮길 때 끊기는 현상의 원인을 추적하고, 모든 sub-list height를 h-28로 통일해 해결한 짧은 기록입니다.
- 발행일
55개 파일의 회색을 처음 통일했다 — 그때는 대비를 재지 않았다
입사 다섯 달째, 화면마다 제각각이던 표 정렬과 보조 제목과 회색을 55개 파일에서 한 번에 손봤습니다. 회색은 400을 500으로 올렸는데, 그때는 대비 수치를 재지 않고 눈으로 골랐어요. 1년 뒤 대비 감사를 하면서 같은 회색이 다시 도마에 올랐고, 그날 고른 값이 우연히 기준선과 같았다는 걸 알았습니다.
- 발행일
Tailwind CSS 정리 — 그리고 이 글이 틀렸던 것: 클래스 순서는 우선순위가 아니다
Tailwind의 단위·색상·레이아웃·반응형을 정리한 레퍼런스입니다. 개고하며 원문을 검증하다 큰 오류를 발견했어요 — "같은 속성은 마지막 클래스가 우선"이라는 전제로 우선순위 절 전체를 썼는데, CSS는 class 속성 안의 순서를 아예 보지 않습니다. 왜 그 오해가 생기는지, 진짜 규칙과 tailwind-merge가 존재하는 이유까지 정정했습니다.
- 발행일
1920px 고정 폭에서 100vw로 — "1980 결정 전"이라는 커밋 제목
디자인 시안이 1920px 기준이라 화면 폭을 max-width 1920px로 잡아 두고 있었습니다. 8월에 "1980 결정 전"이라는 제목으로 온보딩 이미지를 1980px 고정으로 바꿨는데, 1980은 1920의 오타였어요. 두 달 뒤 해상도 이슈로 전부 100vw로 바꿨고, 그게 다음 문제의 시작이었습니다.
- 발행일
해상도 대응 CSS 2,230줄을 넣고 하루 만에 1,895줄을 지웠다 — 브레이크포인트마다 규칙을 통째로 복제한 날
1920px 시안대로 만든 화면을 다른 해상도에 맞추려고 미디어 쿼리 블록마다 규칙을 통째로 복사해 넣었습니다. 하루 만에 CSS가 2,230줄 늘었고, 이튿날 1,895줄을 지우며 달라지는 속성만 남기는 구간 구조로 다시 짰어요. 그 뒤로도 태블릿 브레이크포인트 숫자를 한 시간 동안 네 번 바꿨고, 설치해 둔 react-responsive 훅은 한 번도 안 썼습니다.