Typografialaajennus

@tailwindcss/typography on virallisen typografialaajennuksen 1:1-porttaus PHPlle. Se lisää prose-luokan ja sen muokkaimet, jotka määrittävät luettavat typografiset oletustyylit näytetylle HTML-sisällölle — otsikoille, kappaleille, listoille, lainauksille, koodille, taulukoille ja muulle — ilman, että jokaista elementtiä tarvitsee tyylitellä käsin.

Käyttö

Lataa laajennus komennolla @plugin ja tuo apuohjelmakerros. Käytä sitten prose-luokkaa sisältöä ympäröivässä säiliössä:

use TailwindPHP\tw;

$css = tw::generate(
    '<article class="prose prose-lg"><h1>Title</h1><p>Body text…</p></article>',
    '@plugin "@tailwindcss/typography"; @import "tailwindcss/utilities.css";'
);

Luotu .prose-sääntö määrittää --tw-prose-* mukautettua ominaisuutta (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes ja muita) ja tyylittelee niiden avulla jälkeläiselementit.

Luokat

Koot

Kokomääritteet skaalaavat koko typografisen asteikon. Ne lisätään perusluokan prose rinnalle:

<article class="prose prose-xl">…</article>

Väriteemat

Värimääritteet vaihtavat leipätekstissä, otsikoissa ja reunuksissa käytettävän harmaasävyn:

Käänteinen

prose-invert kääntää väripaletin käytettäväksi tummilla taustoilla. Yhdistä se vapaasti koko- ja värimääritteisiin:

<article class="prose prose-lg prose-slate prose-invert">…</article>

Asetukset

className

Oletuksena laajennus luo luokan prose. Voit nimetä sen uudelleen asetuksella className — myös muokkaimet saavat uuden nimen (markdown, markdown-lg, markdown-invert, …). Kun asetus on määritetty, luokkia prose ei luoda:

$css = tw::generate(
    '<article class="markdown markdown-lg">…</article>',
    '
        @plugin "@tailwindcss/typography" {
            className: "markdown";
        }
        @import "tailwindcss/utilities.css";
    '
);

Huomioita

Elementtimuokkaimet, kuten prose-headings:underline ja prose-a:text-blue-600, rekisteröidään, mutta nykyisessä julkaisussa ne kääntyvät ilman elementtivalitsintaan. Siksi apuohjelma vaikuttaa koko prose-säiliöön sen sijaan, että se vaikuttaisi säiliön otsikoihin tai linkkeihin (#10). Tyylittele nämä elementit omilla CSS-säännöilläsi, kunnes korjaus julkaistaan.

Tämä on TailwindCSS-pohjainen v4-siirros. Jotkin alkuperäisen lisäosan v3-kohtaiset toiminnot, kuten .dark-valitsimeen perustuva tumma tila ja tietyt elementtivarianttien asetukset, toimivat v4-versiossa eri tavoin, eikä niitä tueta tässä. Käytä sen sijaan prose-invert-muunninta ja v4-variantteja.

Katso sivulta Laajennukset tiedot @plugin-direktiivistä ja lataamisesta.