Plugin de typographie Tailwind

Cet article est de Tailwind Labs. J’ai mis cet article pour montrer comment vous pouvez rédiger des articles de blog en utilisant le thème Point Rouge.

Par défaut, Tailwind supprime tous les styles de navigateur par défaut des paragraphes, titres, listes et plus encore. Cela finit par être très utile pour créer des interfaces utilisateur d’application, car vous passez moins de temps à annuler les styles d’agent utilisateur, mais lorsque vous le sont vraiment essayer simplement de styliser du contenu provenant d’un éditeur de texte enrichi dans un CMS ou un fichier markdown, cela peut être surprenant et peu intuitif.

En fait, nous recevons beaucoup de plaintes à ce sujet, les gens nous demandant régulièrement des choses comme :

Pourquoi Tailwind supprime-t-il les styles par défaut sur mon h1 des éléments ? Comment puis-je désactiver cela ? Comment ça, je perds aussi tous les autres styles de base ? Nous vous entendons, mais nous ne sommes pas convaincus que la simple désactivation de nos styles de base soit ce que vous souhaitez réellement. Vous ne voulez pas avoir à supprimer les marges gênantes à chaque fois que vous utilisez un p élément dans un élément de l’interface utilisateur de votre tableau de bord. Et je doute que vous vouliez vraiment que vos articles de blog utilisent les styles d’agent utilisateur - vous voulez qu’ils aient l’air génial, pas terrible.

Le @tailwindcss/typography plugin est notre tentative de vous donner ce que vous en fait je veux, sans aucun des inconvénients de faire quelque chose de stupide comme désactiver nos styles de base.

Il ajoute un nouveau prose classe que vous pouvez appliquer sur n’importe quel bloc de contenu HTML Vanilla et le transformer en un beau document bien formaté :

<article class="prose">
  <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>

Pour plus d’informations sur l’utilisation du plugin et les fonctionnalités qu’il inclut, lire la documentation.

À quoi s’attendre à partir de maintenant

Ce qui suit n’est qu’un tas d’absurdités absolues que j’ai écrites dans Dogfood, le plugin lui-même. Il comprend tous les éléments typographiques sensibles auxquels je pourrais penser, comme texte en gras, listes non ordonnées, listes ordonnées, blocs de code, guillemets en bloc, et même en italique.

Il est important de couvrir tous ces cas d’utilisation pour plusieurs raisons :

1. Nous voulons que tout soit beau dès la sortie de la boîte.
2. Vraiment juste la première raison, c’est tout l’intérêt du plugin.
3. Voici une troisième raison fictive, même si une liste de trois éléments semble plus réaliste qu’une liste de deux éléments.

Nous allons maintenant essayer un autre style d’en-tête.

La typographie devrait être facile

Voilà donc un en-tête pour vous – avec un peu de chance, si nous avons fait notre travail correctement, cela semblera plutôt raisonnable.

Quelque chose qu’une personne sage m’a dit un jour à propos de la typographie est :

La typographie est très importante si vous ne voulez pas que vos contenus ressemblent à des déchets. Faites-le bien, alors ce ne sera pas mauvais. Il est probablement important que les images soient correctes ici également par défaut :

Je vais maintenant vous montrer un exemple de liste non ordonnée pour m’assurer qu’elle a également une belle apparence :

• Voici donc le premier élément de cette liste.
• Dans cet exemple, nous gardons les éléments courts.
• Plus tard, nous utiliserons des éléments de liste plus longs et plus complexes.

Et c’est la fin de cette section.

Et si on empilait les titres ?

Nous devons également nous assurer que cela a l’air bien.

Parfois, vous avez des titres directement les uns en dessous des autres. Dans ces cas-là, vous devez souvent annuler la marge supérieure du deuxième titre, car il est généralement préférable que les titres soient plus rapprochés qu’un paragraphe suivi d’un titre ne devrait l’être.

Quand un titre vient après un paragraphe…

Lorsqu’un titre vient après un paragraphe, il faut un peu plus d’espace, comme je l’ai déjà mentionné plus haut. Voyons maintenant à quoi ressemblerait une liste plus complexe.

• Je fais souvent ce truc où les éléments de liste ont des titres.

  Pour une raison quelconque, je pense que cela a l’air cool, ce qui est regrettable car c’est assez ennuyeux d’avoir les bons styles.

  J’ai souvent deux ou trois paragraphes dans ces éléments de liste, donc le plus difficile est de donner un sens à l’espacement entre les paragraphes, au titre des éléments de liste et aux éléments de liste séparés. Honnêtement, c’est assez difficile, vous pourriez faire valoir que vous ne devriez tout simplement pas écrire de cette façon.

• Puisqu’il s’agit d’une liste, j’ai besoin d’au moins deux éléments.

  J’ai déjà expliqué ce que je fais dans l’élément de liste précédent, mais une liste ne serait pas une liste si elle ne contenait qu’un seul élément, et nous voulons vraiment que cela paraisse réaliste. C’est pourquoi j’ai ajouté ce deuxième élément de liste afin d’avoir quelque chose à prendre en compte lors de l’écriture des styles.

• Ce n’est pas non plus une mauvaise idée d’ajouter un troisième élément.

  Je pense que cela aurait probablement été bien d’utiliser simplement deux éléments, mais trois n’est certainement pas pire, et comme je ne semble avoir aucun problème à inventer des choses arbitraires à saisir, je pourrais aussi bien l’inclure.

Après ce genre de liste, j’ai généralement une déclaration ou un paragraphe de clôture, car cela semble un peu bizarre de passer directement à un titre.

Le code devrait paraître correct par défaut.

Je pense que la plupart des gens vont utiliser surligner.js ou Prisme ou quelque chose comme ça s’ils veulent styliser leurs blocs de code mais ça ne ferait pas de mal de leur donner l’air ok prêt à l’emploi, même sans coloration syntaxique.

Voici ce qu’est un défaut tailwind.config.js le fichier ressemble au moment de la rédaction :

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

J’espère que cela vous semble assez bon.

Qu’en est-il des listes imbriquées ?

En principe, les listes imbriquées ont toujours l’air mauvaises, c’est pourquoi des éditeurs comme Medium ne vous laissent même pas le faire, mais je suppose que puisque certains d’entre vous, les idiots, vont le faire, nous devons au moins porter le fardeau de le faire fonctionner.

1. Les listes imbriquées sont rarement une bonne idée.
   • Vous pourriez avoir l’impression d’être vraiment « organisé » ou quelque chose du genre, mais vous créez simplement une forme grossière sur l’écran qui est difficile à lire.
   • La navigation imbriquée dans les interfaces utilisateur est également une mauvaise idée, gardez les choses aussi plates que possible.
   • Imbriquer des tonnes de dossiers dans votre code source n’est pas non plus utile.
2. Puisque nous avons besoin de plus d’articles, en voici un autre.
   • Je ne sais pas si nous prendrons la peine de styliser à plus de deux niveaux de profondeur.
   • Deux, c’est déjà trop, trois, c’est forcément une mauvaise idée.
   • Si vous nichez à quatre niveaux de profondeur, votre place est en prison.
3. Deux éléments ne constituent pas vraiment une liste, mais trois, c’est bien.
   • Encore une fois, n’imbriquez pas les listes si vous souhaitez que les gens lisent réellement votre contenu.
   • Personne ne veut regarder ça.
   • Je suis contrarié que nous devions même prendre la peine de styliser cela.

La chose la plus ennuyeuse à propos des listes dans Markdown est que <li> les éléments n’ont pas d’enfant <p> balise sauf s’il y a plusieurs paragraphes dans l’élément de liste. Cela signifie que je dois également m’inquiéter du style de cette situation ennuyeuse.

• Par exemple, voici une autre liste imbriquée.

  Mais cette fois avec un deuxième paragraphe.

  • Ces éléments de liste n’auront pas <p> balises
  • Parce qu’ils ne font qu’une seule ligne chacun

• Mais dans ce deuxième élément de liste de premier niveau, ils le feront.

  C’est particulièrement ennuyeux en raison de l’espacement de ce paragraphe.

  • Comme vous pouvez le voir ici, parce que j’ai ajouté une deuxième ligne, cet élément de liste a maintenant un <p> étiquette.

    C’est d’ailleurs la deuxième ligne dont je parle.

  • Enfin, voici un autre élément de liste, donc cela ressemble plus à une liste.

• Un élément de liste de clôture, mais sans liste imbriquée, car pourquoi pas ?

Et enfin une phrase pour clôturer cette section.

Il y a d’autres éléments que nous devons styliser

J’ai presque oublié de mentionner des liens, comme ce lien vers le site web Tailwind CSS. Nous les avons presque rendus bleus, mais c’était le cas hier, alors nous avons opté pour du gris foncé, c’est plus audacieux.

Nous avons même inclus des styles de table, jetez-y un œil :

Nous devons également nous assurer que le code en ligne est beau, comme si je voulais en parler. <span> éléments ou vous annoncer la bonne nouvelle concernant @tailwindcss/typography.

Parfois j’utilise même code dans les rubriques

Même si c’est probablement une mauvaise idée, et historiquement, j’ai eu du mal à la faire paraître belle. Ceci “Enveloppez les blocs de code dans des backticks” l’astuce fonctionne plutôt bien, mais en réalité.

Une autre chose que j’ai faite dans le passé, c’est de mettre un code tag à l’intérieur d’un lien, comme si je voulais vous parler du tailwindcss/docs référentiel. Je n’aime pas qu’il y ait un soulignement sous les backticks mais cela ne vaut absolument pas la folie qu’il faudrait pour l’éviter.

Nous n’avons pas utilisé de h4 encore

Mais maintenant nous l’avons fait. S’il vous plaît, n’utilisez pas h5 ou h6 dans votre contenu, Medium ne prend en charge que deux niveaux de titres pour une raison, vous les animaux. Honnêtement, j’ai envisagé d’utiliser un before pseudo-élément pour vous crier dessus si vous utilisez un h5 ou h6.

Nous ne les stylisons pas du tout hors de la boîte parce que h4 les éléments sont déjà si petits qu’ils ont la même taille que le corps du texte. Que sommes-nous censés faire avec un h5, fais-le plus petit que le corps du texte ? Non merci.

Nous devons cependant encore penser aux titres empilés.

Assurons-nous de ne pas gâcher ça avec h4 éléments non plus.

Ouf, avec un peu de chance, nous avons stylisé les titres au-dessus de ce texte et ils ont l’air plutôt bien.

Ajoutons ici un paragraphe de clôture pour que les choses se terminent par un bloc de texte de taille décente. Je ne peux pas expliquer pourquoi je veux que les choses se terminent de cette façon, mais je dois supposer que c’est parce que je pense que les choses sembleront bizarres ou déséquilibrées s’il y a un titre trop proche de la fin du document.

Ce que j’ai écrit ici est probablement assez long, mais ajouter cette dernière phrase ne peut pas faire de mal.