tailwindcss typography
v0.5.15
Le plugin officiel Tailwind CSS Typography fournit un ensemble de classes prose que vous pouvez utiliser pour ajouter de belles valeurs typographiques par défaut à tout HTML vanille que vous ne contrôlez pas, comme le HTML rendu à partir de Markdown ou extrait d'un CMS.
< article class =" prose lg:prose-xl " > {{ markdown }} </ article >Pour voir à quoi cela ressemble en action, consultez notre démo en direct sur Tailwind Play.
Installez le plugin depuis npm :
npm install -D @tailwindcss/typography Ajoutez ensuite le plugin à votre fichier tailwind.config.js :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Vous pouvez désormais utiliser les classes prose pour ajouter des styles typographiques judicieux à n'importe quel HTML Vanilla :
< 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 >Ce plugin comprend une classe de modificateur pour chacune des cinq échelles de gris que Tailwind inclut par défaut afin que vous puissiez facilement styliser votre contenu pour qu'il corresponde aux gris que vous utilisez dans votre projet.
< article class =" prose prose-slate " > {{ markdown }} </ article >Voici les classes générées à l’aide d’une version Tailwind CSS v2.0 totalement par défaut :
| Classe | Échelle de gris |
|---|---|
prose-gray (par défaut) | Gris |
prose-slate | Ardoise |
prose-zinc | Zinc |
prose-neutral | Neutre |
prose-stone | Pierre |
Les classes de modificateurs sont conçues pour être utilisées avec le modèle de modificateur multi-classes et doivent être utilisées conjointement avec la classe prose de base.
Note
Incluez toujours la classe prose lors de l'ajout d'un modificateur d'échelle de gris
< article class =" prose prose-stone " > {{ markdown }} </ article >Pour en savoir plus sur la création de vos propres thèmes de couleurs, lisez la documentation sur l'ajout de thèmes de couleurs personnalisés.
Les modificateurs de taille vous permettent d'ajuster la taille globale de votre typographie pour différents contextes.
< article class =" prose prose-xl " > {{ markdown }} </ article >Cinq tailles de typographie différentes sont incluses dès la sortie de la boîte :
| Classe | Taille de la police du corps |
|---|---|
prose-sm | 0,875 rem (14px) |
prose-base (par défaut) | 1rem (16px) |
prose-lg | 1,125rem (18px) |
prose-xl | 1,25rem (20px) |
prose-2xl | 1,5rem (24px) |
Ceux-ci peuvent être utilisés en combinaison avec les modificateurs de point d'arrêt de Tailwind pour modifier la taille globale de la police d'un élément de contenu dans différentes tailles de fenêtre :
< article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >Tout ce qui concerne les modificateurs de taille fournis a été réglé à la main par des concepteurs professionnels pour être aussi beau que possible, y compris les relations entre les tailles de police, l'espacement des titres, le remplissage des blocs de code, etc.
Les modificateurs de taille sont conçus pour être utilisés avec le modèle de modificateur multi-classes et doivent être utilisés conjointement avec la classe prose de base.
Note
Incluez toujours la classe prose lors de l'ajout d'un modificateur de taille
< article class =" prose prose-lg " > {{ markdown }} </ article >Pour en savoir plus sur la personnalisation des échelles de types incluses, lisez la documentation sur la personnalisation du CSS.
Chaque thème de couleur par défaut comprend une version en mode sombre conçue à la main que vous pouvez déclencher en ajoutant la classe prose-invert :
< article class =" prose dark:prose-invert " > {{ markdown }} </ article >Pour en savoir plus sur la création de vos propres thèmes de couleurs, lisez la documentation sur l'ajout de thèmes de couleurs personnalisés.
Utilisez des modificateurs d'éléments pour personnaliser le style des éléments individuels de votre contenu directement dans votre HTML :
< article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
{{ markdown }}
</ article >Cela facilite la réalisation de tâches telles que le style des liens correspondant à votre marque, l'ajout d'un rayon de bordure aux images, et bien plus encore.
Voici une liste complète des modificateurs d'éléments disponibles :
| Modificateur | Cible |
|---|---|
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 |
Lorsque vous empilez ces modificateurs avec d'autres modificateurs comme hover , vous souhaiterez probablement que l'autre modificateur vienne en premier :
< article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >Lisez la documentation CSS Tailwind sur la commande des modificateurs empilés pour en savoir plus.
Chaque modificateur de taille est livré avec une max-width conçue pour garder le contenu aussi lisible que possible. Cependant, ce n'est pas toujours ce que vous souhaitez, et parfois vous souhaiterez que le contenu remplisse simplement la largeur de son conteneur.
Dans ces cas, tout ce que vous avez à faire est d'ajouter max-w-none à votre contenu pour remplacer la largeur maximale intégrée :
< 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 > Si vous avez un bloc de balisage intégré dans du contenu qui ne devrait pas hériter des styles prose , utilisez la classe not-prose pour le mettre en 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 > Notez que vous ne pouvez pas imbriquer de nouvelles instances prose dans un bloc not-prose pour le moment.
Vous pouvez créer votre propre thème de couleurs en ajoutant une nouvelle clé dans la section typography de votre fichier tailwind.config.js et en fournissant vos couleurs sous la clé 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' ) ,
// ...
] ,
}Consultez nos définitions de style internes pour d’autres exemples.
Si vous devez utiliser un nom de classe autre que prose pour une raison quelconque, vous pouvez le faire en utilisant l'option className lors de l'enregistrement du plugin :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
// ...
} ,
plugins : [
require ( '@tailwindcss/typography' ) ( {
className : 'wysiwyg' ,
} ) ,
]
. . .
} Désormais, chaque instance de prose dans les noms de classe par défaut sera remplacée par votre nom de classe personnalisé :
< 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 > Si vous souhaitez personnaliser le CSS brut généré par ce plugin, ajoutez vos remplacements sous la clé typography dans la section theme de votre fichier 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' ) ,
// ...
] ,
} Comme pour toutes les personnalisations de thème dans Tailwind, vous pouvez également définir la clé typography en tant que fonction si vous avez besoin d'accéder à l'assistant theme :
/** @type {import('tailwindcss').Config} */
module . exports = {
theme : {
extend : {
typography : ( theme ) => ( {
DEFAULT : {
css : {
color : theme ( 'colors.gray.800' ) ,
// ...
} ,
} ,
} ) ,
} ,
} ,
plugins : [
require ( '@tailwindcss/typography' ) ,
// ...
] ,
} Les personnalisations doivent être appliquées à un modificateur spécifique comme DEFAULT ou xl , et doivent être ajoutées sous la propriété css . Les personnalisations sont créées dans la même syntaxe CSS-in-JS que celle utilisée pour écrire les plugins Tailwind.
Consultez les styles par défaut de ce plugin pour des exemples plus approfondis de configuration de chaque modificateur.
Pour obtenir de l'aide, une discussion sur les meilleures pratiques ou toute autre conversation qui gagnerait à être consultable :
Discutez du plugin Tailwind CSS Typography sur GitHub
Pour discuter occasionnellement avec d'autres personnes utilisant le framework :
Rejoignez le serveur Discord CSS Tailwind
