Tailwind 4 text-base 가 14px 로 나간 이유

아이폰 사파리는 글자가 16px 미만인 입력칸을 누르면 화면을 자동으로 확대한다. 그리고 원래대로 안 돌아온다. 폰으로 쓰는 화면이면 이건 그냥 버그다.

2026-08-14, 학교에서 코치가 폰으로 쓰는 화면을 폭 390px 로 전수 검수했다. 확대가 나는지 보려고 입력칸 글자 크기를 쟀다. 코드에는 이렇게 적혀 있었다.

className="h-11 w-full rounded-lg border px-3 text-base ..."

text-base 는 16px 이다. 코드만 읽으면 아무 문제가 없다. 그런데 브라우저에서 getComputedStyle 로 재 보니 text-base 가 붙은 입력칸 5개가 전부 14px 이었다.

클래스가 요소 선택자에 졌다

범인은 전역 CSS 한 줄이었다.

input {
  font-size: 14px;
}

특이도만 보면 클래스(.text-base)가 요소 선택자(input)보다 높다. 상식대로면 16px 이 이겨야 한다.

그런데 Tailwind 4 는 유틸리티를 캐스케이드 레이어(@layer utilities) 안에 넣는다. CSS 규칙상 레이어 밖 선언은 레이어 안 선언을 무조건 이긴다 — 특이도와 무관하게. 저 input {} 규칙은 레이어 밖에 있었다.

그래서 화면 코드가 16px 이라고 선언해도 실제로 나가는 값은 14px 이었고, 아이폰에서는 입력칸을 누를 때마다 화면이 확대됐다.

코드 리뷰로는 안 잡혔다

같은 화면을 그날 아침에 코드로도 훑었다. text-base 를 보고 「16px 이니 통과」로 넘겼다. 파일에 써 있는 값과 브라우저가 쓰는 값이 다를 수 있다는 것을 계산에 안 넣었다. 잡힌 건 실제로 잰 뒤였다.

어디까지 고칠까 — 전역을 안 건드렸다

저 전역 규칙은 같은 앱의 다른 갈래(해커톤 페이지·자료실)도 함께 쓴다. 갈래가 둘 있었다.

• 전역을 16px 로 바꾼다 → 일관되지만 안 건드리기로 한 화면들의 입력칸이 전부 커진다
• 문제가 난 갈래만 덮는다 → 기존 화면은 그대로, 대신 규칙이 두 벌이 된다

두 번째를 골랐다. 지금 급한 건 아이폰 확대지 CSS 정리가 아니고, 전역을 건드리면 확인해야 할 화면이 갑자기 두 배가 된다.

껍데기 컴포넌트에 표시용 클래스를 하나 붙이고, 그 안에서만 16px 로 되돌렸다.

.school-scope input,
.school-scope select,
.school-scope textarea {
  font-size: 16px;
}

전역 input { font-size: 14px } 은 그대로 뒀다 — 다른 갈래가 쓰고 있다.

검수 방식도 바꿨다

폭이 걸린 화면은 코드를 읽는 대신 재기로 했다. 크롬 창은 500px 아래로 안 줄어들어서, 390px 짜리 iframe 에 페이지를 태워 그 안에서 getComputedStyle 과 getBoundingClientRect 로 쟀다.

같은 방법으로 그날 다른 것도 같이 걸렸다. 시간 입력칸이 106px 로 눌려 「오후 04:」까지만 보이고 분이 잘려 있었다.

화면에 관한 주장은 파일이 아니라 브라우저가 답한다.

CSS 는 「내가 쓴 것」과 「적용된 것」이 갈리는 층이 하나 더 있다. 레이어가 그 층이었다.