Preflight - Tailwind CSS

Overview

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

CSS에 @tailwind base를 포함하면 Tailwind가 자동으로 이러한 스타일을 주입합니다:

@tailwind base; /* Preflight 스타일이 여기에 주입됩니다 */

@tailwind components;

@tailwind utilities;

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

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

기본 마진 제거

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

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

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

제목 요소는 기본적으로 스타일이 없음

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

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

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

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

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

페이지의 글 형태 부분에 적절한 기본 제목 스타일을 선택적으로 적용하고 싶다면, @tailwindcss/typography 플러그인을 사용하는 것을 추천합니다.

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

순서 있는 리스트(ordered list)와 순서 없는 리스트(unordered list)는 기본적으로 스타일이 적용되지 않습니다. 글머리 기호나 숫자가 없으며, 마진과 패딩도 없습니다.

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

프로젝트에 기본 리스트 스타일을 추가하려면 사용자 정의 기본 스타일 추가를 참고하세요.

페이지의 글 내용 부분에만 기본 리스트 스타일을 선택적으로 적용하려면 @tailwindcss/typography 플러그인을 사용하는 것을 추천합니다.

접근성 고려사항

스타일이 적용되지 않은 목록은 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="...">

전역적으로 테두리 스타일이 초기화됨

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

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

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

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

이런 상황에 직면하면, Preflight 스타일을 커스텀 CSS로 덮어써서 해결할 수 있습니다:

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

Preflight 확장하기

Preflight 위에 여러분만의 기본 스타일을 추가하고 싶다면, @layer base 지시자를 사용해 CSS에 추가하면 됩니다.

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

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

Preflight 비활성화

기존 프로젝트에 Tailwind를 통합하거나 직접 기본 스타일을 제공하고 싶다면 Preflight를 완전히 비활성화할 수 있습니다. tailwind.config.js 파일의 corePlugins 섹션에서 preflight를 false로 설정하면 됩니다.

tailwind.config.js

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

On this page