Wtyczka typografii

@tailwindcss/typography to 1:1 PHP oficjalnej wtyczki typografii. Dodaje klasę prose i jej modyfikatory, które stosują czytelne domyślne style typograficzne do bloku renderowanego HTML — nagłówków, akapitów, list, cytatów blokowych, kodu, tabel i innych elementów — bez konieczności ręcznego stylowania każdego z nich.

Użycie

Załaduj wtyczkę przez @plugin i zaimportuj warstwę utilities, a następnie zastosuj prose do kontenera obejmującego treść:

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

Wygenerowana reguła .prose definiuje --tw-prose-* własnych właściwości (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes i inne) i styluje elementy potomne za ich pomocą.

Klasy

Rozmiary

Modyfikatory rozmiaru skalują całą skalę typograficzną. Stosuje się je wraz z bazową klasą prose:

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

Motywy kolorystyczne

Modyfikatory kolorów zmieniają skalę szarości używaną dla tekstu głównego, nagłówków i obramowań:

Odwrócenie

prose-invert odwraca paletę kolorów na potrzeby ciemnych teł. Można go dowolnie łączyć z modyfikatorami rozmiaru i koloru:

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

Opcje

className

Domyślnie wtyczka generuje klasę prose. Ustaw className, aby zmienić jej nazwę — modyfikatory przyjmą nową nazwę (markdown, markdown-lg, markdown-invert, …). Po ustawieniu tej opcji klasy prose nie są generowane:

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

Uwagi

Modyfikatory elementów, takie jak prose-headings:underline lub prose-a:text-blue-600, są zarejestrowane, ale w bieżącej wersji kompilują się bez selektora elementu, więc narzędzie jest stosowane do całego kontenera prose zamiast do zawartych w nim nagłówków lub linków (#10). Do czasu naprawy stylizuj te elementy za pomocą własnego CSS.

To port TailwindCSS v4. Niektóre zachowania specyficzne dla v3 z oryginalnej wtyczki — tryb ciemny selektora .dark oraz niektóre formaty konfiguracji wariantów elementów — działają inaczej w v4 i nie są tu obsługiwane; użyj zamiast nich modyfikatora prose-invert i wariantów v4.

Zobacz Wtyczki, aby poznać dyrektywę @plugin i szczegóły wczytywania.