Tipogrāfijas spraudnis

@tailwindcss/typography ir oficiālā tipogrāfijas spraudņa 1:1 PHP ports. Tas pievieno klasi prose un tās modifikatorus, kas renderēta HTML blokam piemēro salasāmus tipogrāfijas noklusējuma iestatījumus — virsrakstiem, rindkopām, sarakstiem, citātiem, kodam, tabulām un citam saturam — bez vajadzības stilizēt katru elementu atsevišķi.

Lietošana

Ielādējiet spraudni ar @plugin un importējiet utilītu slāni, pēc tam piemērojiet prose konteineram, kurā atrodas jūsu saturs:

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

Ģenerētais .prose noteikums definē --tw-prose-* pielāgotos rekvizītus (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes un citus) un ar to palīdzību stilizē pēcteču elementus.

Klases

Izmēri

Izmēra modifikatori maina visas tipogrāfijas skalas izmēru. Tos lieto kopā ar pamata klasi prose:

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

Krāsu motīvi

Krāsu modifikatori maina pelēko toņu skalu, ko izmanto pamattekstam, virsrakstiem un apmalēm:

Invertēšana

prose-invert apvērš krāsu paleti, lai to varētu lietot uz tumša fona. Brīvi kombinējiet to ar izmēra un krāsas modifikatoriem:

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

Opcijas

className

Pēc noklusējuma spraudnis ģenerē klasi prose. Iestatiet className, lai to pārdēvētu — modifikatori izmantos jauno nosaukumu (markdown, markdown-lg, markdown-invert, …). Ja šī opcija ir iestatīta, klases prose netiek ģenerētas:

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

Piezīmes

Elementu modifikatori, piemēram, prose-headings:underline vai prose-a:text-blue-600, ir reģistrēti, taču pašreizējā laidienā tie tiek kompilēti bez elementa selektora, tāpēc utilīta tiek piemērota visam prose konteineram, nevis tajā esošajiem virsrakstiem vai saitēm (#10). Līdz labojumam stilizējiet šos elementus ar saviem CSS.

Šis ir TailwindCSS v4 ports. Dažas sākotnējā spraudņa funkcijas, kas raksturīgas v3 — tumšais režīms ar .dark selektoru un noteikti elementu variantu konfigurācijas formāti — v4 darbojas citādi un šeit netiek atbalstītas; to vietā izmantojiet modifikatoru prose-invert un variantus v4.

Direktīvu @plugin un ielādes informāciju skatiet sadaļā Spraudņi.