tailwindcss typography
v0.5.15
O plugin oficial Tailwind CSS Typography fornece um conjunto de classes prose que você pode usar para adicionar belos padrões tipográficos a qualquer HTML básico que você não controla, como HTML renderizado de Markdown ou extraído de um CMS.
< article class =" prose lg:prose-xl " > {{ markdown }} </ article >Para ver como fica em ação, confira nossa demonstração ao vivo no Tailwind Play.
Instale o plugin do npm:
npm install -D @tailwindcss/typography Em seguida, adicione o plugin ao seu arquivo tailwind.config.js :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Agora você pode usar as classes prose para adicionar estilos de tipografia sensatos a qualquer HTML simples:
< 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 >Este plug-in inclui uma classe modificadora para cada uma das cinco escalas de cinza que o Tailwind inclui por padrão, para que você possa estilizar facilmente seu conteúdo para corresponder aos tons de cinza que está usando em seu projeto.
< article class =" prose prose-slate " > {{ markdown }} </ article >Aqui estão as classes que são geradas usando uma construção Tailwind CSS v2.0 totalmente padrão:
| Aula | Escala de cinza |
|---|---|
prose-gray (padrão) | Cinza |
prose-slate | Ardósia |
prose-zinc | Zinco |
prose-neutral | Neutro |
prose-stone | Pedra |
As classes modificadoras são projetadas para serem usadas com o padrão modificador multiclasse e devem ser usadas em conjunto com a classe prose base.
Observação
Sempre inclua a classe prose ao adicionar um modificador de escala de cinza
< article class =" prose prose-stone " > {{ markdown }} </ article >Para saber como criar seus próprios temas de cores, leia a documentação sobre como adicionar temas de cores personalizados.
Os modificadores de tamanho permitem ajustar o tamanho geral da sua tipografia para diferentes contextos.
< article class =" prose prose-xl " > {{ markdown }} </ article >Cinco tamanhos de tipografia diferentes estão incluídos imediatamente:
| Aula | Tamanho da fonte do corpo |
|---|---|
prose-sm | 0,875rem (14px) |
prose-base (padrão) | 1rem (16px) |
prose-lg | 1,125 rem (18px) |
prose-xl | 1,25 rem (20px) |
prose-2xl | 1,5rem (24px) |
Eles podem ser usados em combinação com os modificadores de ponto de interrupção do Tailwind para alterar o tamanho geral da fonte de uma parte do conteúdo em diferentes tamanhos de janela de visualização:
< article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >Tudo sobre os modificadores de tamanho fornecidos foi ajustado manualmente por designers profissionais para parecer o mais bonito possível, incluindo as relações entre tamanhos de fonte, espaçamento de cabeçalho, preenchimento de bloco de código e muito mais.
Os modificadores de tamanho são projetados para serem usados com o padrão modificador multiclasse e devem ser usados em conjunto com a classe prose base.
Observação
Sempre inclua a classe prose ao adicionar um modificador de tamanho
< article class =" prose prose-lg " > {{ markdown }} </ article >Para saber mais sobre como personalizar as escalas de tipos incluídas, leia a documentação sobre como personalizar o CSS.
Cada tema de cores padrão inclui uma versão de modo escuro projetada à mão que você pode acionar adicionando a classe prose-invert :
< article class =" prose dark:prose-invert " > {{ markdown }} </ article >Para saber como criar seus próprios temas de cores, leia a documentação sobre como adicionar temas de cores personalizados.
Use modificadores de elemento para personalizar o estilo de elementos individuais em seu conteúdo diretamente em seu HTML:
< article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
{{ markdown }}
</ article >Isso torna mais fácil fazer coisas como estilizar links para combinar com sua marca, adicionar um raio de borda às imagens e muito mais.
Aqui está uma lista completa de modificadores de elementos disponíveis:
| Modificador | Alvo |
|---|---|
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 |
Ao empilhar esses modificadores com outros modificadores como hover , você provavelmente deseja que o outro modificador venha primeiro:
< article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >Leia a documentação CSS do Tailwind sobre como solicitar modificadores empilhados para saber mais.
Cada modificador de tamanho vem com uma max-width projetada para manter o conteúdo o mais legível possível. Porém, nem sempre é isso que você deseja e, às vezes, você deseja que o conteúdo preencha apenas a largura do contêiner.
Nesses casos, tudo o que você precisa fazer é adicionar max-w-none ao seu conteúdo para substituir a largura máxima incorporada:
< 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 > Se você tiver um bloco de marcação incorporado em algum conteúdo que não deveria herdar os estilos prose , use a classe not-prose para colocá-lo em sandbox:
< 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 > Observe que você não pode aninhar novas instâncias prose em um bloco not-prose neste momento.
Você pode criar seu próprio tema de cores adicionando uma nova chave na seção typography do seu arquivo tailwind.config.js e fornecendo suas cores na chave 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' ) ,
// ...
] ,
}Veja nossas definições de estilo interno para mais alguns exemplos.
Se você precisar usar um nome de classe diferente de prose por qualquer motivo, poderá fazê-lo usando a opção className ao registrar o plugin:
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ( {
className : 'wysiwyg' ,
} ) ,
]
. . .
} Agora, cada instância de prose nos nomes de classe padrão será substituída pelo nome de classe personalizado:
< 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 > Se você deseja personalizar o CSS bruto gerado por este plug-in, adicione suas substituições na chave typography na seção theme do seu arquivo tailwind.config.js :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : {
DEFAULT : {
css : {
color : '#333' ,
a : {
color : '#3182ce' ,
'&:hover' : {
color : '#2c5282' ,
} ,
} ,
} ,
} ,
} ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Como acontece com todas as personalizações de tema no Tailwind, você também pode definir a chave typography como uma função se precisar de acesso ao auxiliar theme :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : ( theme ) => ( {
DEFAULT : {
css : {
color : theme ( 'colors.gray.800' ) ,
// ...
} ,
} ,
} ) ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} As personalizações devem ser aplicadas a um modificador específico como DEFAULT ou xl e devem ser adicionadas na propriedade css . As personalizações são criadas na mesma sintaxe CSS-in-JS usada para escrever plug-ins Tailwind.
Veja os estilos padrão deste plugin para exemplos mais detalhados de configuração de cada modificador.
Para obter ajuda, discussão sobre práticas recomendadas ou qualquer outra conversa que se beneficiaria por ser pesquisável:
Discuta o plugin Tailwind CSS Typography no GitHub
Para bate-papo casual com outras pessoas usando a estrutura:
Junte-se ao servidor Tailwind CSS Discord
