Tipografijos papildinys

@tailwindcss/typography yra oficialaus tipografijos papildinio prievadas santykiu 1:1, skirtas PHP. Jis prideda klasę prose ir jos modifikatorius, kurie taiko skaitomumą gerinančias tipografines numatytąsias reikšmes atvaizduoto HTML blokui – antraštėms, pastraipoms, sąrašams, citatoms, kodui, lentelėms ir kt. – kad nereikėtų stilizuoti kiekvieno elemento rankiniu būdu.

Naudojimas

Įkelkite papildinį naudodami @plugin ir importuokite paslaugų sluoksnį, tada pritaikykite prose turinį apgaubiančiam konteineriui:

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";'
);

Sugeneruota taisyklė .prose apibrėžia --tw-prose-* tinkintų ypatybių (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes ir kitų) ir per jas stilizuoja vidinius elementus.

Klasės

Dydžiai

Dydžio modifikatoriai keičia visą šriftų dydžių skalę. Jie taikomi kartu su pagrindine klase prose:

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

Spalvų temos

Spalvų modifikatoriai pakeičia pilkų atspalvių paletę, naudojamą pagrindiniam tekstui, antraštėms ir kraštinėms:

Invertavimas

prose-invert apverčia spalvų paletę, kad ją būtų galima naudoti tamsiuose fonuose. Jį galima laisvai derinti su dydžio ir spalvų modifikatoriais:

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

Parinktys

className

Pagal numatytuosius nustatymus papildinys sugeneruoja klasę prose. Nustatykite className, jei norite ją pervadinti – modifikatoriai perims naują pavadinimą (markdown, markdown-lg, markdown-invert, …). Nustačius šią parinktį, klasės prose negeneruojamos:

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

Pastabos

Elementų modifikatoriai, pavyzdžiui, prose-headings:underline ar prose-a:text-blue-600, užregistruojami, tačiau dabartinėje versijoje kompiliuojami be elementų parinkiklio, todėl paslauga taikoma visam prose konteineriui, o ne jame esančioms antraštėms ar nuorodoms (#10). Kol ši problema bus išspręsta, šiuos elementus stilizuokite savo CSS.

Tai yra TailwindCSS v4 prievadas. Kai kurios nuo v3 priklausančios pradinio papildinio funkcijos – tamsusis režimas su parinkikliu .dark ir tam tikri elementų variantų konfigūracijos formatai – v4 veikia kitaip ir čia nepalaikomos; vietoj jų naudokite modifikatorių prose-invert ir variantus v4.

Daugiau informacijos apie Papildinius, @plugin direktyvą ir įkėlimą rasite čia.