SvelteKit과 tailwind 실행 순서 문제

오늘은 스타일링 이야기를 해보려고 합니다.

문제 요약

웹 페이지 제작 과정에서 랜더링과 tailwind 순서로 인해 첫 랜더링과 새로고침 과정에서 화면 구성 요소가 깨지는 현상이 발생했습니다. 사용하는 프레임 워크는 svelte kit 이구요. 스타일은 tailwind CSS로 진행했습니다. Tailwind CSS를 app.postcss란 파일로 전역 스타일링을 주고 있었는데. 그 전역 스타일링 과정에서 문제가 생겼죠. app.postcss가 전역 요소들과 함께 tailwind 전반의 실행을 담당하고 있었기 때문에 실행이 지체된 것 같습니다.

시도한 해결 방안

처음에는 동료 팀원이 맡았던 문제였는데요. app.postcss가 랜더링보다 먼저 실행되게 혹은 실행 후 랜더링이 되도록 구성하려고 했습니다. 그러나 그럴 경우 전역 스타일링에 문제가 생기거나 tailwind 자체가 실행이 안되는 경우가 많았습니다. 때문에 spinner를 넣거나 랜더링에 딜레이를 넣는 방법까지 찾아봤지만 화면을 의도적으로 지연시키고 싶지는 않았죠.

해결책

임기 응변식 해결책이었지만 app.html에

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

이런 링크를 삽입해주니 해결되었습니다. 위 링크는 tailwind를 네트워크를 통해 실행할 수 있도록 도와줍니다. 이를 body 상단에 놓아 랜더링보다 스타일링이 먼저 세팅되도록 했습니다. 물론 이럴 경우 스타일링을 네트워크와 app.postcss 두 가지에서 관장하기 때문에 아주 best 해결책은 아닙니다. 향후 차차 개선 방안을 찾아봐야 겠지만 일단 오늘은 이걸로 해결해서 만족스럽네요.