Skip to content

Tailwind:Base

기본(또는 전역) 스타일은 <a> 태그, 제목 등과 같은 기본 HTML 요소에 대한 유용한 기본값을 설정하거나 널리 사용되는 상자 크기 재설정과 같은 독창적인 재설정을 적용하는 스타일시트의 시작 부분에 있는 스타일입니다.

Tailwind에는 우리가 Preflight라고 부르는 즉시 사용 가능한 유용한 기본 스타일 세트가 포함되어 있습니다. 이 스타일은 실제로는 normalize.css에 더하여 보다 독창적인 추가 스타일의 얇은 레이어입니다.

Preflight는 대부분의 프로젝트에서 훌륭한 출발점이지만 고유한 추가 기본 스타일을 추가하려는 경우 관용적으로 수행하기 위한 몇 가지 권장 사항은 다음과 같습니다.

Using classes in your HTML

html 또는 body 요소에 일부 전역 스타일을 적용하려는 경우 새 CSS를 작성하는 대신 HTML의 해당 요소에 기존 클래스를 추가하는 것이 좋습니다: 

<!doctype html>
<html lang="en" class="text-gray-900 antialiased leading-tight">
  <!-- ... -->
  <body class="min-h-screen bg-gray-100">
    <!-- ... -->
  </body>
</html>

CSS 사용

특정 요소에 일부 기본 스타일을 적용하려는 경우 가장 쉬운 방법은 CSS에 추가하는 것입니다. 

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

See also

Favorite site