tailwindcss typography
v0.5.15
공식 Tailwind CSS Typography 플러그인은 Markdown에서 렌더링되거나 CMS에서 가져온 HTML과 같이 제어할 수 없는 바닐라 HTML에 아름다운 인쇄 기본값을 추가하는 데 사용할 수 있는 prose 클래스 세트를 제공합니다.
< article class =" prose lg:prose-xl " > {{ markdown }} </ article >실제 모습을 보려면 Tailwind Play의 라이브 데모를 확인하세요.
npm에서 플러그인을 설치합니다.
npm install -D @tailwindcss/typography 그런 다음 tailwind.config.js 파일에 플러그인을 추가합니다.
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} 이제 prose 클래스를 사용하여 바닐라 HTML에 합리적인 타이포그래피 스타일을 추가할 수 있습니다.
< article class =" prose lg:prose-xl " >
< h1 > Garlic bread with cheese: What the science tells us </ h1 >
< p >
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</ p >
< p >
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</ p >
<!-- ... -->
</ article >이 플러그인에는 Tailwind에 기본적으로 포함된 5가지 회색조 각각에 대한 수정자 클래스가 포함되어 있으므로 프로젝트에서 사용 중인 회색과 일치하도록 콘텐츠 스타일을 쉽게 지정할 수 있습니다.
< article class =" prose prose-slate " > {{ markdown }} </ article >다음은 완전히 기본인 Tailwind CSS v2.0 빌드를 사용하여 생성된 클래스입니다.
| 수업 | 그레이 스케일 |
|---|---|
prose-gray (기본값) | 회색 |
prose-slate | 슬레이트 |
prose-zinc | 아연 |
prose-neutral | 중립적 |
prose-stone | 결석 |
수정자 클래스는 다중 클래스 수정자 패턴과 함께 사용하도록 설계되었으며 기본 prose 클래스와 함께 사용해야 합니다.
메모
그레이 스케일 수정자를 추가할 때 항상 prose 클래스를 포함하세요
< article class =" prose prose-stone " > {{ markdown }} </ article >자신만의 색상 테마를 만드는 방법을 알아보려면 사용자 정의 색상 테마 추가 설명서를 읽어보세요.
크기 수정자를 사용하면 다양한 상황에 맞게 타이포그래피의 전체 크기를 조정할 수 있습니다.
< article class =" prose prose-xl " > {{ markdown }} </ article >기본적으로 다섯 가지의 서로 다른 타이포그래피 크기가 포함되어 있습니다.
| 수업 | 본문 글꼴 크기 |
|---|---|
prose-sm | 0.875rem (14px) |
prose-base (기본값) | 1렘 (16px) |
prose-lg | 1.125rem (18px) |
prose-xl | 1.25rem (20px) |
prose-2xl | 1.5rem (24px) |
이는 Tailwind의 중단점 수정자와 함께 사용하여 다양한 뷰포트 크기에서 콘텐츠의 전체 글꼴 크기를 변경할 수 있습니다.
< article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >글꼴 크기, 제목 간격, 코드 블록 패딩 간의 관계를 포함하여 제공된 크기 수정자에 대한 모든 내용은 전문 디자이너가 가능한 한 아름답게 보이도록 직접 조정했습니다.
크기 수정자는 다중 클래스 수정자 패턴과 함께 사용하도록 설계되었으며 기본 prose 클래스와 함께 사용해야 합니다.
메모
크기 수정자를 추가할 때 항상 prose 클래스를 포함하세요.
< article class =" prose prose-lg " > {{ markdown }} </ article >포함된 유형 스케일을 사용자 정의하는 방법을 알아보려면 CSS 사용자 정의에 대한 문서를 읽어보세요.
각 기본 색상 테마에는 prose-invert 클래스를 추가하여 실행할 수 있는 직접 디자인한 어두운 모드 버전이 포함되어 있습니다.
< article class =" prose dark:prose-invert " > {{ markdown }} </ article >자신만의 색상 테마를 만드는 방법을 알아보려면 사용자 정의 색상 테마 추가 설명서를 읽어보세요.
요소 수정자를 사용하여 HTML에서 직접 콘텐츠의 개별 요소 스타일을 맞춤설정하세요.
< article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
{{ markdown }}
</ article >이를 통해 브랜드에 맞는 스타일 링크, 이미지에 테두리 반경 추가 등의 작업을 쉽게 수행할 수 있습니다.
사용 가능한 요소 수정자의 전체 목록은 다음과 같습니다.
| 수정자 | 목표 |
|---|---|
prose-headings:{utility} | h1 , h2 , h3 , h4 , th |
prose-lead:{utility} | [class~="lead"] |
prose-h1:{utility} | h1 |
prose-h2:{utility} | h2 |
prose-h3:{utility} | h3 |
prose-h4:{utility} | h4 |
prose-p:{utility} | p |
prose-a:{utility} | a |
prose-blockquote:{utility} | blockquote |
prose-figure:{utility} | figure |
prose-figcaption:{utility} | figcaption |
prose-strong:{utility} | strong |
prose-em:{utility} | em |
prose-kbd:{utility} | kbd |
prose-code:{utility} | code |
prose-pre:{utility} | pre |
prose-ol:{utility} | ol |
prose-ul:{utility} | ul |
prose-li:{utility} | li |
prose-table:{utility} | table |
prose-thead:{utility} | thead |
prose-tr:{utility} | tr |
prose-th:{utility} | th |
prose-td:{utility} | td |
prose-img:{utility} | img |
prose-video:{utility} | video |
prose-hr:{utility} | hr |
hover 와 같은 다른 수정자와 이러한 수정자를 쌓을 때 다른 수정자가 먼저 오기를 원할 가능성이 높습니다.
< article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >자세히 알아보려면 누적 수정자 주문에 대한 Tailwind CSS 문서를 읽어보세요.
각 크기 수정자에는 콘텐츠를 최대한 읽기 쉽게 유지하도록 설계된 max-width 가 포함되어 있습니다. 하지만 이것이 항상 원하는 것은 아니며 때로는 콘텐츠가 컨테이너의 너비만 채워지기를 원할 수도 있습니다.
이러한 경우에는 콘텐츠에 max-w-none 추가하여 포함된 최대 너비를 재정의하기만 하면 됩니다.
< div class =" grid grid-cols-4 " >
< div class =" col-span-1 " >
<!-- ... -->
</ div >
< div class =" col-span-3 " >
< article class =" prose max-w-none " > {{ markdown }} </ article >
</ div >
</ div > prose 스타일을 상속해서는 안 되는 일부 콘텐츠에 마크업 블록이 포함되어 있는 경우, not-prose 클래스를 사용하여 샌드박스 처리하세요.
< article class =" prose " >
< h1 > My Heading </ h1 >
< p > ... </ p >
< div class =" not-prose " >
<!-- Some example or demo that needs to be prose-free -->
</ div >
< p > ... </ p >
<!-- ... -->
</ article > 현재로서는 not-prose 블록 내에 새 prose 인스턴스를 중첩할 수 없습니다.
tailwind.config.js 파일의 typography 섹션에 새 키를 추가하고 css 키 아래에 색상을 제공하여 고유한 색상 테마를 만들 수 있습니다.
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : ( { theme } ) => ( {
pink : {
css : {
'--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
'--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
'--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
'--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
'--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
'--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
'--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
'--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
'--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
'--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
'--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
'--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
'--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
'--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
'--tw-prose-invert-links' : theme ( 'colors.white' ) ,
'--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
'--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
'--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
'--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
'--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
'--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
'--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
'--tw-prose-invert-code' : theme ( 'colors.white' ) ,
'--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
'--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
'--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
'--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
} ,
} ,
} ) ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
}더 많은 예를 보려면 내부 스타일 정의를 참조하세요.
어떤 이유로든 prose 아닌 클래스 이름을 사용해야 하는 경우 플러그인을 등록할 때 className 옵션을 사용하여 그렇게 할 수 있습니다.
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ( {
className : 'wysiwyg' ,
} ) ,
]
. . .
} 이제 기본 클래스 이름의 모든 prose 인스턴스가 사용자 정의 클래스 이름으로 대체됩니다.
< article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
< h1 > My Heading </ h1 >
< p > ... </ p >
< div class =" not-wysiwyg " >
<!-- Some example or demo that needs to be prose-free -->
</ div >
< p > ... </ p >
<!-- ... -->
</ article > 이 플러그인에서 생성된 원시 CSS를 사용자 정의하려면 tailwind.config.js 파일의 theme 섹션에 있는 typography 키 아래에 재정의를 추가하세요.
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : {
DEFAULT : {
css : {
color : '#333' ,
a : {
color : '#3182ce' ,
'&:hover' : {
color : '#2c5282' ,
} ,
} ,
} ,
} ,
} ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Tailwind의 모든 테마 맞춤설정과 마찬가지로 theme 도우미에 액세스해야 하는 경우 typography 키를 함수로 정의할 수도 있습니다.
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : ( theme ) => ( {
DEFAULT : {
css : {
color : theme ( 'colors.gray.800' ) ,
// ...
} ,
} ,
} ) ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} 사용자 정의는 DEFAULT 또는 xl 과 같은 특정 수정자에 적용되어야 하며 css 속성 아래에 추가되어야 합니다. 맞춤설정은 Tailwind 플러그인을 작성하는 데 사용된 것과 동일한 CSS-in-JS 구문으로 작성됩니다.
각 수정자를 구성하는 자세한 예는 이 플러그인의 기본 스타일을 참조하세요.
도움이 필요하거나 모범 사례에 대한 토론 또는 검색을 통해 도움이 될 수 있는 기타 대화가 필요한 경우:
GitHub에서 Tailwind CSS Typography 플러그인에 대해 토론하세요.
프레임워크를 사용하는 다른 사람들과의 일상적인 잡담의 경우:
Tailwind CSS Discord 서버에 가입하세요
