Guida di stile

Fino ad ora, cercare di stilizzare un articolo, un documento o un post di blog con Tailwind è stato un compito tedioso che richiedeva un occhio attento alla tipografia e molto CSS personalizzato complesso.

Per impostazione predefinita, Tailwind rimuove tutti gli stili predefiniti del browser da paragrafi, intestazioni, elenchi e altro. Questo risulta essere davvero utile per costruire interfacce utente di applicazioni perché si passa meno tempo a eliminare gli stili dell'agente utente, ma quando davvero si cerca di stilizzare del contenuto proveniente da un editor di testo ricco in un CMS o da un file markdown, può essere sorprendente e poco intuitivo.

Riceviamo molte lamentele a riguardo, con persone che ci chiedono regolarmente cose come:

Perché Tailwind rimuove gli stili predefiniti sui miei elementi h1? Come posso disabilitarlo? Cosa intendi con il fatto che perdo anche tutti gli altri stili base? Ti sentiamo, ma non siamo convinti che semplicemente disabilitare i nostri stili base sia ciò che vuoi davvero. Non vuoi dover rimuovere margini fastidiosi ogni volta che usi un elemento p in una parte della tua interfaccia utente del dashboard. E dubito che tu voglia davvero che i tuoi post di blog utilizzino gli stili dell'agente utente — vuoi che sembrino fantastici, non terribili.

Il plugin @tailwindcss/typography è il nostro tentativo di darti ciò che realmente vuoi, senza nessuno degli svantaggi di fare qualcosa di stupido come disabilitare i nostri stili base.

Aggiunge una nuova classe prose che puoi applicare a qualsiasi blocco di contenuto HTML vanilla per trasformarlo in un documento bello e ben formattato:

<article class="prose">
  <h1>Pane all'aglio con formaggio: cosa ci dice la scienza</h1>
  <p>Per anni i genitori hanno propagandato i benefici per la salute del mangiare pane all'aglio con formaggio ai loro figli, con il cibo che ha guadagnato uno status iconico nella nostra cultura tanto che i bambini spesso si travestono da pagnotta calda e formaggiosa per Halloween.</p>
  <p>Ma un recente studio mostra che l'antipasto celebrato potrebbe essere collegato a una serie di casi di rabbia che si stanno diffondendo in tutto il paese.</p>
</article>

Per ulteriori informazioni su come utilizzare il plugin e le funzionalità che include, leggi la documentazione.

Cosa aspettarsi da qui in avanti

Quello che segue è solo un mucchio di assoluto nonsense che ho scritto per testare il plugin stesso. Include ogni elemento tipografico sensato che mi è venuto in mente, come testo in grassetto, elenchi non ordinati, elenchi ordinati, blocchi di codice, citazioni, e persino corsivo.

È importante coprire tutti questi casi d'uso per alcune ragioni:

1. Vogliamo che tutto sembri bello fin da subito.
2. Davvero solo la prima ragione, è tutto il punto del plugin.
3. Ecco una terza ragione fittizia, anche se un elenco con tre elementi sembra più realistico di un elenco con due elementi.

Ora proveremo un altro stile di intestazione.

La tipografia dovrebbe essere facile

Quindi questa è un'intestazione per te — con un po' di fortuna, se abbiamo fatto bene il nostro lavoro, sembrerà abbastanza ragionevole.

Qualcosa che una persona saggia mi ha detto una volta sulla tipografia è:

La tipografia è piuttosto importante se non vuoi che le tue cose sembrino spazzatura. Falla bene e non sarà male.

Probabilmente è importante che anche le immagini sembrino a posto qui per impostazione predefinita:

Contrariamente alla credenza popolare, Lorem Ipsum non è semplicemente un testo casuale. Ha radici in un'opera di letteratura latina classica del 45 a.C., rendendolo vecchio di oltre 2000 anni.

Ora ti mostrerò un esempio di elenco non ordinato per assicurarmi che anche quello sembri buono:

• Quindi ecco il primo elemento in questo elenco.
• In questo esempio manteniamo gli elementi brevi.
• Più tardi, useremo elementi di elenco più lunghi e complessi.

E questa è la fine di questa sezione.

E se impilassimo le intestazioni?

Dovremmo assicurarci che anche questo sembri buono.

A volte hai intestazioni direttamente una sotto l'altra. In quei casi spesso devi annullare il margine superiore sulla seconda intestazione perché di solito sembra meglio che le intestazioni siano più vicine tra loro rispetto a un paragrafo seguito da un'intestazione.

Quando un'intestazione segue un paragrafo …

Quando un'intestazione segue un paragrafo, abbiamo bisogno di un po' più di spazio, come ho già menzionato sopra. Ora vediamo come sarebbe un elenco più complesso.

• Spesso faccio questa cosa in cui gli elementi dell'elenco hanno intestazioni.

  Per qualche motivo penso che questo sembri figo, il che è sfortunato perché è piuttosto fastidioso ottenere gli stili giusti.

  Spesso ho due o tre paragrafi in questi elementi dell'elenco, quindi la parte difficile è ottenere che lo spazio tra i paragrafi, l'intestazione dell'elemento dell'elenco e gli elementi dell'elenco separati abbiano tutti senso. Abbastanza difficile onestamente, si potrebbe fare un forte argomento che non dovresti scrivere in questo modo.

• Dato che questo è un elenco, ho bisogno di almeno due elementi.

  Ho già spiegato cosa sto facendo nel precedente elemento dell'elenco, ma un elenco non sarebbe un elenco se avesse solo un elemento, e vogliamo davvero che questo sembri realistico. Ecco perché ho aggiunto questo secondo elemento dell'elenco così ho effettivamente qualcosa da guardare mentre scrivo gli stili.

• Non è una cattiva idea aggiungere anche un terzo elemento.

  Penso che probabilmente sarebbe andato bene usare solo due elementi, ma tre sicuramente non è peggio, e dato che non sembra che abbia problemi a inventare cose arbitrarie da scrivere, tanto vale includerlo.

Dopo questo tipo di elenco di solito ho una dichiarazione o un paragrafo di chiusura, perché sembra un po' strano passare direttamente a un'intestazione.

Il codice dovrebbe sembrare a posto per impostazione predefinita.

Penso che la maggior parte delle persone userà highlight.js o Prism o qualcosa del genere se vogliono stilizzare i loro blocchi di codice, ma non farebbe male farli sembrare a posto fin da subito, anche senza evidenziazione della sintassi.

Ecco come appare un file tailwind.config.js predefinito al momento della scrittura:

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

Spero che ti sembri abbastanza buono.

E per quanto riguarda gli elenchi annidati?

Gli elenchi annidati praticamente sembrano sempre brutti, motivo per cui editor come Medium non ti permettono nemmeno di farlo, ma immagino che dato che alcuni di voi pasticcioni lo faranno, dobbiamo assumerci il peso di almeno farlo funzionare.

1. Gli elenchi annidati sono raramente una buona idea.
   • Potresti sentirti come se fossi davvero "organizzato" o qualcosa del genere, ma stai solo creando una forma grossolana sullo schermo che è difficile da leggere.
   • Anche la navigazione annidata nelle interfacce utente è una cattiva idea, mantieni le cose il più piatte possibile.
   • Annidare tonnellate di cartelle nel tuo codice sorgente non è nemmeno utile.
2. Dato che abbiamo bisogno di più elementi, eccone un altro.
   • Non sono sicuro se ci preoccuperemo di stilizzare più di due livelli di profondità.
   • Due sono già troppi, tre sono garantiti per essere una cattiva idea.
   • Se annidi quattro livelli di profondità, appartieni alla prigione.
3. Due elementi non sono davvero un elenco, tre sono buoni però.
   • Ancora una volta, per favore non annidare elenchi se vuoi che le persone leggano effettivamente il tuo contenuto.
   • Nessuno vuole guardare questo.
   • Sono arrabbiato che dobbiamo persino preoccuparci di stilizzare questo.

La cosa più fastidiosa degli elenchi in Markdown è che gli elementi <li> non ricevono un tag figlio <p> a meno che non ci siano più paragrafi nell'elemento dell'elenco. Ciò significa che devo preoccuparmi di stilizzare anche quella situazione fastidiosa.

• Ad esempio, ecco un altro elenco annidato.

  Ma questa volta con un secondo paragrafo.

  • Questi elementi dell'elenco non avranno tag <p>
  • Perché sono solo una riga ciascuno

• Ma in questo secondo elemento dell'elenco di primo livello, lo avranno.

  Questo è particolarmente fastidioso a causa dello spazio in questo paragrafo.

  • Come puoi vedere qui, dato che ho aggiunto una seconda riga, questo elemento dell'elenco ora ha un tag <p>.

    Questa è la seconda riga di cui sto parlando, a proposito.

  • Infine, ecco un altro elemento dell'elenco, così sembra più un elenco.

• Un elemento dell'elenco di chiusura, ma senza elenco annidato, perché no?

E infine una frase per chiudere questa sezione.

Ci sono altri elementi che dobbiamo stilizzare

Quasi dimenticavo di menzionare i link, come questo link al sito web di Tailwind CSS. Stavamo quasi per farli blu, ma è così ieri, quindi abbiamo optato per il grigio scuro, sembra più audace.

Abbiamo incluso anche gli stili per le tabelle, dai un'occhiata:

Dobbiamo anche assicurarci che il codice inline sembri buono, come se volessi parlare di elementi <span> o darti la buona notizia su @tailwindcss/typography.

A volte uso persino code nelle intestazioni

Anche se probabilmente è una cattiva idea, e storicamente ho avuto difficoltà a farlo sembrare buono. Questo trucco di "avvolgere i blocchi di codice tra backtick" funziona abbastanza bene però davvero.

Un'altra cosa che ho fatto in passato è mettere un tag code all'interno di un link, come se volessi parlarti del repository tailwindcss/docs. Non mi piace che ci sia una sottolineatura sotto i backtick, ma non vale assolutamente la follia che richiederebbe evitarlo.

Non abbiamo ancora usato un h4

Ma ora lo abbiamo fatto. Per favore, non usare h5 o h6 nel tuo contenuto, Medium supporta solo due livelli di intestazione per una ragione, animali. Onestamente ho considerato di usare un pseudo-elemento before per urlarti contro se usi un h5 o un h6.

Non li stilizziamo affatto di default perché gli elementi h4 sono già così piccoli che sono della stessa dimensione del corpo del testo. Cosa dovremmo fare con un h5, renderlo più piccolo del corpo del testo? No grazie.

Dobbiamo ancora pensare alle intestazioni impilate però.

Assicuriamoci di non rovinare nemmeno questo con gli elementi h4.

Phew, con un po' di fortuna abbiamo stilizzato le intestazioni sopra questo testo e sembrano abbastanza buone.

Aggiungiamo un paragrafo di chiusura qui in modo che le cose finiscano con un blocco di testo di dimensioni decenti. Non posso spiegare perché voglio che le cose finiscano in questo modo, ma devo presumere che sia perché penso che le cose sembreranno strane o sbilanciate se c'è un'intestazione troppo vicina alla fine del documento.

Quello che ho scritto qui è probabilmente abbastanza lungo, ma aggiungere questa frase finale non può far male.

Markdown in stile GitHub

Ho anche aggiunto il supporto per il Markdown in stile GitHub usando remark-gfm.

Con remark-gfm, otteniamo alcune funzionalità extra nel nostro markdown. Esempio: collegamenti automatici.

Un link come www.example.com o https://example.com verrebbe automaticamente convertito in un tag a.

Questo funziona anche per i link email: contact@example.com.