TailwindCSS 타이포그래피 플러그인 사용 방법

빠른 UI 스타일 생성을 위해 의견이 없는 클래스 이름을 제공하는 유틸리티 최초의 CSS 라이브러리인 Tailwind는 프론트엔드 개발 장면을 폭풍으로 몰아넣었고 2020년 최고의 CSS 프레임워크에 포함되었습니다.

TailwindCSS의 채택률이 기하급수적으로 증가하고 있지만 더 많은 사람들이 간단한 NPM 다운로드를 통해 사용할 수 있는 다양한 플러그인을 모르고 있다는 사실에 충격을 받았습니다.

오늘의 간단한 기사에서 저는 Tailwind Typography 플러그인을 소개하고 그 기능을 소개하고 이것이 다음 TailwindCSS 프로젝트에 적합한 이유를 설명하겠습니다.

TailwindCSS 타이포그래피 플러그인을 사용하는 이유

TailwindCSS에서 텍스트 스타일을 지정하는 것은 h1 요소에 몇 가지 유틸리티 클래스를 추가하여 크기를 늘리고 글꼴 두께를 늘리고 특정 색상을 적용하는 것만큼 간단합니다. 대부분의 웹 사이트 콘텐츠는 텍스트로 구성되어 있기 때문에 템플릿은 많은 텍스트 유틸리티 클래스로 빠르게 흩어질 수 있습니다.

반복되는 코드를 템플릿 부분 또는 JavaScript 구성 요소로 추출하면 템플릿을 더 깨끗하게 유지하는 데 도움이 될 수 있지만 프로젝트가 성장함에 따라 유지 관리가 어려워집니다.

TailwindLabs의 팀은 이러한 문제점을 파악하고 Tailwind Typography 플러그인을 통해 텍스트 스타일을 디자인 시스템으로 추출하는 사용하기 쉬운 플러그인을 만들었습니다.

Tailwind 타이포그래피 플러그인 설치

프로젝트에 플러그인을 설치하려면 다음 명령을 실행하기만 하면 됩니다.

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

패키지가 설치되면 플러그인을 tailwind.config.js 파일에 추가합니다.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Tailwind 타이포그래피 플러그인 사용 방법

Tailwind 구성에서 플러그인을 선언하면 새prose 유틸리티 클래스를 사용하여 템플릿에 논리적 타이포그래피 스타일을 추가할 수 있습니다.
prose 유틸리티 클래스에는 prose-sm ~ prose-2xl 범위의 5가지 크기 수정자가 포함됩니다. 각 크기 변형에는 사용자에게 아름다운 읽기 경험을 제공하기 위해 글꼴 크기, 제목 공백, 패딩 등의 관계와 관련하여 다른 규칙이 있습니다.

<article class="prose lg:prose-xl">
  <h1>A Long-Expected Party</h1>
  <p>
    When Mr. Bilbo Baggins of Bag End announced that he would shortly be
celebrating his eleventy-first birthday with a party of special magnificence,
there was much talk and excitement in Hobbiton.
  </p>
  <!-- ... -->
</article>

타이포그래피 플러그인의 Tailwind 색상 수정자

크기 수정자 외에도 Tailwind Typography 플러그인은 마크업에서 앵커 태그를 사용할 때 유연성을 제공합니다. 기본 제공되는 앵커 요소는 텍스트에 밑줄이 그어진 흐릿한 짙은 회색으로 스타일이 지정됩니다. 앵커 텍스트의 색상을 변경하려면 아래 나열된 7가지 제공된 색상 수정자 중 하나를 사용하십시오.

prose-red

prose-yellow

prose-green

prose-blue

prose-indigo

prose-purple

prose-pink

색상은 tailwind.config.js 파일에서 API를 수정하여 사용자 정의할 수 있습니다even further.

결론

TailwindCSS Typography 플러그인은 전문 디자이너가 제작한 사용하기 쉬운 솔루션 덕분에 텍스트 블록을 아름다운 스타일로 그립니다.

공식 TailwindCSS 플러그인의 전체 목록은 Tailwind documentation website 을 확인하십시오.