[tailwindCSS] CSS 컬러 설정이 특정 브라우저에서만 작동하는 경우

일괄적인 컬러 적용을 위해 테일윈드 :root 클래스에 darkblue 프로퍼티를 선언하여 사용하고 있었습니다.

하지만 크롬에서는 작동하고 사파리에선 작동하지 않는 이슈가 터지고 말았습니다!! 아아~

크롬만 보고 테스트해서 이미 메인 서비스까지 올려놨는데 말이죠~ 새벽에 확인하고 허겁지겁 롤백했다 아입니꺼~

같은 CSS가 브라우저에 따라 다르게 렌더링되는 현상 발생.. (위 크롬 아래 사파리)

globals.css에 darkblue를 선언해놓은 모습

처음에 추정한 원인은 테일윈드CSS 클래스 관련해서 사파리엔 아직 지원하지 않는게 있나? 싶었지만,

결국 원인은 오타였습니다. 사진에서 --darkblue를 선언할 때 중간에 쉼표가 들어간 게 보이시나요?

--darkblue: 215, 56%, 17% // 이렇게 쉼표를 모두 붙이거나,
--darkblue: 215 56% 17% // 이렇게 모두 없애야 합니다.

사파리가 이상한 게 아니고, 크롬 브라우저의 CSS 파싱이 휴먼 에러를 고쳐줬던 케이스였습니다.

시중에 있는 컬러 컨버터(RGB-HSL-HEX)에서 쓰는 포맷이 제각각이라 컬러 변환한 값을 그대로 카피해서 쓰다간 이렇게 될 수 있습니다.. 이런 경우가 더러 있더군요.

lint나 prettier 플러그인에 직접 추가해놔도 좋을 것 같습니다.

 

유사한 케이스

https://www.reddit.com/r/tailwindcss/comments/1e98gw0/color_not_working_properly_in_ios_devices_on_any/