Preflight

개요

Preflight는 modern-normalize를 기반으로 구축된 Tailwind 프로젝트를 위한 기본 스타일 세트입니다. 이 스타일은 크로스 브라우저 간의 불일치를 완화하고, 여러분이 디자인 시스템의 제약 조건 내에서 더 쉽게 작업할 수 있도록 설계되었습니다.

tailwindcss를 프로젝트에 임포트하면 Preflight가 자동으로 base 레이어에 주입됩니다:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Preflight의 대부분의 스타일은 눈에 띄지 않도록 설계되었습니다. 이 스타일들은 단순히 여러분이 기대하는 대로 동작하도록 만듭니다. 하지만 일부 스타일은 더 의견이 반영되어 있어 처음 접할 때 놀라울 수 있습니다.

Preflight에 의해 적용된 모든 스타일의 전체 참조는 스타일시트를 확인하세요.

마진 제거

Preflight는 제목, 인용문, 단락 등 모든 엘리먼트의 기본 마진을 제거합니다:

*,::after,::before,::backdrop,::file-selector-button {  margin: 0;  padding: 0;}

이렇게 하면 사용자 에이전트 스타일시트에서 적용된 마진 값을 실수로 의존하는 것을 방지할 수 있습니다. 이 마진 값들은 여러분의 간격 규모에 포함되지 않기 때문입니다.

테두리 스타일 초기화

Tailwind는 border 클래스를 추가하기만 해도 쉽게 테두리를 추가할 수 있도록, 모든 엘리먼트의 기본 테두리 스타일을 다음 규칙으로 재정의합니다:

*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box;  border: 0 solid;}

border 클래스는 border-width 속성만 설정하기 때문에, 이 초기화는 해당 클래스를 추가할 때 항상 currentColor를 사용하는 1px의 실선 테두리가 추가되도록 보장합니다.

이로 인해 Google 지도와 같은 특정 타사 라이브러리를 통합할 때 예상치 못한 결과가 발생할 수 있습니다.

이런 상황이 발생하면, Preflight 스타일을 커스텀 CSS로 재정의하여 해결할 수 있습니다:

@layer base {  .google-map * {    border-style: none;  }}

제목 요소는 기본적으로 스타일이 적용되지 않음

모든 제목 요소는 기본적으로 스타일이 적용되지 않으며, 일반 텍스트와 동일한 글꼴 크기와 두께를 가집니다:

h1,h2,h3,h4,h5,h6 {  font-size: inherit;  font-weight: inherit;}

이렇게 설계된 이유는 두 가지입니다:

• 타입 스케일에서 벗어나지 않도록 도움을 줍니다. 기본적으로 브라우저는 Tailwind의 기본 타입 스케일에 존재하지 않는 크기를 제목에 할당하며, 이는 여러분의 타입 스케일에서도 보장되지 않습니다.
• UI 개발에서 제목은 시각적으로 강조되지 않는 경우가 많습니다. 제목에 기본적으로 스타일을 적용하지 않으면, 제목에 스타일을 적용할 때 의식적이고 신중하게 결정할 수 있습니다.

여러분은 기본 스타일 추가를 통해 프로젝트에 기본 제목 스타일을 추가할 수 있습니다.

리스트는 기본적으로 스타일이 없음

순서 있는 리스트(ordered list)와 순서 없는 리스트(unordered list)는 기본적으로 스타일이 적용되지 않습니다. 즉, 글머리 기호나 숫자가 표시되지 않습니다:

ol,ul,menu {  list-style: none;}

리스트에 스타일을 적용하려면 list-style-type과 list-style-position 유틸리티를 사용할 수 있습니다:

<ul class="list-inside list-disc">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

프로젝트에 기본 리스트 스타일을 추가하려면 커스텀 기본 스타일 추가하기를 참고하세요.

접근성 고려사항

스타일이 적용되지 않은 목록은 VoiceOver에서 목록으로 인식되지 않습니다. 여러분의 콘텐츠가 실제로 목록이지만 스타일을 적용하지 않고 유지하고 싶다면, 요소에 "list" 역할(role)을 추가하세요:

<ul role="list">  <li>One</li>  <li>Two</li>  <li>Three</li></ul>

이미지는 블록 레벨 요소입니다

이미지와 svg, video, canvas 등의 대체 요소(replaced elements)는 기본적으로 display: block으로 설정됩니다:

img,svg,video,canvas,audio,iframe,embed,object {  display: block;  vertical-align: middle;}

이 설정은 브라우저 기본값인 display: inline을 사용할 때 발생할 수 있는 예상치 못한 정렬 문제를 방지하는 데 도움이 됩니다.

이러한 요소를 block 대신 inline으로 만들고 싶다면, 간단히 inline 유틸리티를 사용하면 됩니다:

<img class="inline" src="..." alt="..." />

이미지 크기 제한

이미지와 비디오는 원래의 가로세로 비율을 유지하면서 부모 요소의 너비에 맞게 제한됩니다:

img,video {  max-width: 100%;  height: auto;}

이 설정은 이미지와 비디오가 컨테이너를 벗어나지 않도록 하고, 기본적으로 반응형으로 동작하게 합니다. 이 동작을 재정의해야 할 경우 max-w-none 유틸리티를 사용하세요:

<img class="max-w-none" src="..." alt="..." />

Preflight 확장하기

Preflight 위에 여러분만의 기본 스타일을 추가하고 싶다면, CSS에서 @layer base를 사용해 base CSS 레이어에 추가하세요:

@layer base {  h1 {    font-size: var(--text-2xl);  }  h2 {    font-size: var(--text-xl);  }  h3 {    font-size: var(--text-lg);  }  a {    color: var(--color-blue-600);    text-decoration-line: underline;  }}

더 자세한 내용은 기본 스타일 추가 문서에서 확인할 수 있습니다.

Preflight 비활성화

기존 프로젝트에 Tailwind를 통합하거나 직접 기본 스타일을 정의하고 싶다면 Preflight를 완전히 비활성화할 수 있습니다. 이때 필요한 Tailwind 부분만 가져오면 됩니다.

기본적으로 @import "tailwindcss";는 다음과 같이 주입합니다:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);

Preflight를 비활성화하려면 해당 부분을 제외하고 나머지를 유지하면 됩니다:

@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities);