Preflight: CSS 초기화에 대한 Tailwind의 해답

어떤 웹 프로젝트를 하든 브라우저의 내장 스타일에 영향을 최소화하면서 일관적인 UI를 구현하는 것은 매우 중요한 고려사항인데요. 이번 포스팅에서는 Tailwind에서 제시하고 있는 이러한 CSS 초기화 문제에 대한 해답인 Preflight에 대해서 알아보겠습니다.

Preflight란?

Preflight는 Tailwind에서 가장 근간이 되는 기본 스타일시트(stylesheet)이며 Tailwind로 스타일한 웹 페이지가 어느 브라우저에서 열든 일관적으로 보이도록 해주는데요. Tailwind를 사용하는 것을 “비행”이라고 비유하여 Tailwind를 쓰기 전에 꼭 필요하다는 의미로 Preflight라는 재밌는 이름을 붙이지 않았을까 싶습니다.

크롬이든 사파리든 파이어폭스든 우리가 사용하는 대부분의 브라우저는 자체적인 스타일시트을 내장하고 있어서 (이를 소위 User Agent Stylesheet라고 하죠?) 스타일링이 전혀 되어 있지 않은 웹 페이지도 어느 정도 HTML 요소를 육안으로 구분할 수 있습니다. 예를 들어 <h1> 요소는 <h2> 요소보다 커 보이고, <a> 요소는 자동으로 밑줄이 그어지며, <button> 요소는 주변에는 테두리가 생기죠.

브라우저의 내장 스타일로 인한 부작용에 대한 두 가지 대표적인 접근 방법인 CSS Reset과 CSS Normalize에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

그런데 이렇게 편의를 위해서 브라우저가 기본적으로 적용해주는 스타일이 Tailwind를 사용할 때는 자질구질한 걸림돌이 될 수 있는데요. 예를 들어, 크롬 브라우저의 경우 기본적으로 <h1> 요소의 위 아래로 21.44px의 margin을 추가해주는데요. Tailwind에서는 요소에 여백을 줄 때 my-1나 px-2처럼 단위 없이 4px을 배수로하는 하는 숫자를 사용합니다.

따라서 Tailwind로는 별도의 커스터마이징을 하지 않고서는 21.44px라는 margin을 만들어 낼 수 없습니다. 만약에 브라우저의 내장 스타일이 암묵적으로 적용된 <h1> 요소가 Tailwind로 명시적으로 스타일된 <h1> 요소와 한 페이지에 공존하면 UI 일관성을 해칠 수 있죠.

하지만 Tailwind가 제공하는 Preflight를 사용하면 Tailwind를 사용할 때 이러한 문제가 없도록 브라우저 수준에서 기본 적용된 CSS 스타일을 적절히 초기화를 시켜줍니다. 이를 통해서 스타일링을 누락한 부분이 쉽게 눈에 띄어 의도치 않게 브라우저의 내장 스타일에 의존하는 것을 방지해주며 결과적으로 여러 브라우저에서 동일한 결과물을 얻을 수 있습니다.

Preflight의 CSS 초기화

Preflight는 다른 CSS Normalize/CSS Reset 라이브러리에서도 공통적으로 사용되는 많은 스타일을 포함하고 있는데요. 대표적인 예로 모든 HTML 요소의 box-sizing 속성을 border-box로 설정해주는 것을 들 수 있겠습니다.

CSS 박스 모델과 box-sizing 속성에 대한 자세한 설명은 관련 포스팅을 참고 바랍니다.

뿐만 아니라 Tailwind의 특성을 감안하여 포함된 다소 특이한 스타일링도 볼 수 있는데요. 대략적으로 다음과 같이 정리해볼 수 있겠습니다.

• 모든 HTML 요소에 적용된margin 속성을 일괄 제거
• <h1>, <h2>, <h3>와 같은 헤딩(heading) 요소에 적용된 기본 스타일을 제거
• <ul>, <ol>와 같은 리스트(list) 요소에 적용된 기본 스타일 제거
• <img>, <svg>와 같은 멀티미디어 요소의 display 속성을 block으로 설정
• <img>, <video>와 같은 멀티미디어 요소가 부모 요소를 삐져나갈 수 없도록 너비를 제한
• 모든 HTML 요소의 테두리 속성을 Tailwind 방식으로 초기화

참고로 전체 스타일시트는 여기에서 확인해보실 수 있습니다.

Preflight를 통해 CSS 초기화가 되면 아래와 같이 육안으로 다른 요소를 구분을 할 수 없는 완전한 백지 상태가 됩니다. 이를 통해서 우리는 브라우저의 내장 스타일의 영향을 받지 않고 Tailwind로만 스타일링을 할 수 있게 되는 것입니다.

Preflight 설정

Tailwind에서 일관적인 스타일링을 위해서 Preflight를 사용하는 것을 권장하고 있으며 따라서 기본적으로 활성화가 되어 있습니다.

만약에 어떤 이유로든 Tailwind를 사용하는 프로젝트에서 이러한 권고를 무시하고 Preflight를 비활성화시켜야 한다면 다음과 같이 설정하시면 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // ...
};

만약에 일부 HTML 요소를 상대로 완전히 CSS를 초기화 후에 약간의 기본 스타일링이 필요하다면 다음과 같이 @layer base 지시자를 통해서 Preflight를 확장할 수도 있습니다.

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  p {
    @apply text-red-600;
  }
  ul {
    @apply list-inside list-disc marker:text-sky-500;
  }
  a {
    @apply text-sky-500 hover:text-sky-600;
  }
}

@tailwind components;

@tailwind utilities;

위에서 작성했던 동일한 웹 페이지가 이번에는 약간의 기본 스타일이 적용되는 것을 볼 수 있습니다.

마치면서

이상으로 Tailwind가 제공하는 CSS 초기화 방법인 Preflight에 대해서 살펴보았습니다. 이렇게 별다른 노력없이 브라우저에 구애받지 않고 일관성있는 스타일링이 가능하다는 부분이 Tailwind의 또 다른 매력일 것입니다. 😄

Tailwind에 관련 포스팅은 Tailwind 태그를 통해서 쉽게 만나보세요!