Tailwind print:hidden 이 안 먹는 이유 — 클래스는 붙었는데 규칙이 없었다

빌드가 통과하고 타입 검사도 통과했는데 화면에서는 아무 일도 안 일어나는 때가 있다. 2026-08-16 에 두 번 그랬다.

앱 화면 아래에 있던 막대를 인쇄물에서 숨기려고 Tailwind 의 print:hidden 을 붙였다. 「인쇄할 때 감춘다」는 뜻이다. 빌드 통과, 타입 검사 통과, 화면을 열어 보니 막대도 잘 있었다. 그런데 인쇄 미리보기에서 그 막대가 종이 아래에 그대로 찍혔다.

브라우저에서 인쇄용 스타일 규칙을 전부 훑었다. @media print 블록이 딱 하나 있었고, 거기에 그 클래스가 없었다. 클래스는 요소에 붙어 있는데, 그 클래스가 무슨 일을 해야 하는지 적힌 규칙이 아예 만들어지지 않았다.

같은 날 밤 다른 자리에서 똑같은 일이 났다. 공용 부품 창고에서 팝업 컴포넌트를 가져와 붙였다. 팝업은 잘 떴는데 뒤가 안 어두워졌다. 그 부품은 뒤 막의 색을 bg-overlay 라는 이름으로 받는데, 가져온 쪽 프로젝트에 그 이름의 색이 정의돼 있지 않았다.

컴포넌트를 의심했는데 아니었다

두 번 다 처음엔 컴포넌트를 의심했다. 팝업이 잘못 만들어졌나, 인쇄 CSS 우선순위가 밀렸나.

원인은 둘 다 없는 이름을 불렀다였다.

요즘 CSS 도구는 소스에서 클래스 이름을 훑어 쓰인 것만 규칙을 만든다. 그래서 정의되지 않은 이름을 쓰면 에러가 아니라 침묵이 된다. 클래스는 DOM 에 남아 있고, 빌드는 성공하고, 타입 검사는 통과한다. 아무 데서도 안 걸린다.

고약한 건 평소의 확인 방법이 전부 통과한다는 점이다. 컴파일 에러도, 콘솔 경고도, 빨간 줄도 없다. 클래스가 붙어 있는 걸 눈으로 확인하면 「했다」는 느낌까지 든다. 그런데 아무 일도 안 일어난다.

확인하는 대상을 바꿨다

클래스가 붙었는지가 아니라 계산된 값을 본다.

// 클래스가 붙었나 — 붙어 있어도 아무 일도 안 할 수 있다
el.className.includes('bg-overlay')

// 실제로 무슨 색이 칠해졌나
getComputedStyle(el).backgroundColor   // rgba(0,0,0,0) 이면 규칙이 없는 것

설치 절차에도 한 줄 넣었다. 공용 부품을 다른 프로젝트로 가져올 때, 그 부품이 쓰는 색 이름을 뽑아서 받는 쪽에 다 있는지 대조한다. 없으면 그 자리에서 알려준다. 부품 소스를 읽고 이름을 손으로 세는 게 아니라, 뽑아서 비교하는 명령 한 줄이다.

세었더니 못 볼 뻔한 게 나왔다

그날 화면 색을 통째로 흑백으로 바꾸는 작업도 같이 했다. 「눈으로 봐서 회색이면 됐다」로 끝내지 않고 그려진 색 중 회색이 아닌 것을 세게 했다. 빨강·초록·파랑 값이 서로 6 이상 벌어지면 유채색이다.

그 덕에 인쇄용 보고서 안에 앱과 다른 초록·빨강이 박혀 있는 걸 찾았다. 같은 「출석」인데 화면에서 쓰는 초록과 종이에서 쓰는 초록이 다른 값이었다. 스크린샷으로는 둘 다 그냥 초록으로 보인다. 세지 않았으면 영영 몰랐을 것이다.