Tipografi Eklentisi

@tailwindcss/typography, resmi tipografi eklentisinin 1:1 PHP bağlantı noktasıdır. prose sınıfını ve değiştiricilerini ekleyerek oluşturulmuş HTML bloğuna okunabilir tipografik varsayılanlar uygular. Böylece her öğeyi tek tek biçimlendirmeden başlıkları, paragrafları, listeleri, alıntı bloklarını, kodu, tabloları ve daha fazlasını biçimlendirebilirsiniz.

Kullanım

Eklentiyi @plugin ile yükleyip yardımcılar katmanını içe aktarın, ardından prose sınıfını içeriğinizi saran kapsayıcıya uygulayın:

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

Oluşturulan .prose kuralı, --tw-prose-* özel özelliği (--tw-prose-body, --tw-prose-headings, --tw-prose-links, --tw-prose-code, --tw-prose-quotes ve diğerleri) tanımlar ve alt öğeleri bunlar aracılığıyla biçimlendirir.

Sınıflar

Boyutlar

Boyut değiştiricileri tüm yazı tipi ölçeğini büyütüp küçültür. Bunlar temel prose sınıfıyla birlikte uygulanır:

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

Renk temaları

Renk değiştiricileri, gövde metni, başlıklar ve kenarlıklar için kullanılan gri tonlarını değiştirir:

Ters çevirme

prose-invert, koyu arka planlarda kullanılmak üzere renk paletini tersine çevirir. Bunu boyut ve renk değiştiricileriyle serbestçe birleştirin:

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

Seçenekler

className

Eklenti varsayılan olarak prose sınıfını oluşturur. Adını değiştirmek için className ayarını belirleyin; değiştiriciler yeni adı izler (markdown, markdown-lg, markdown-invert, …). Bu ayarlandığında prose sınıfları oluşturulmaz:

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

Notlar

prose-headings:underline veya prose-a:text-blue-600 gibi öğe değiştiricileri kaydedilir; ancak mevcut sürümde öğe seçicileri olmadan derlenirler. Bu nedenle yardımcı, içindeki başlık veya bağlantılar yerine tüm prose kapsayıcısına uygulanır (#10). Düzeltme yayımlanana kadar bu öğeleri kendi CSS kurallarınızla biçimlendirin.

Bu, TailwindCSS v4 bağlantı noktasıdır. Orijinal eklentinin v3'ye özgü bazı davranışları — .dark seçicisine bağlı koyu mod ve belirli öğe varyantı yapılandırma biçimleri — v4 içinde farklı çalışır ve burada desteklenmez; bunun yerine prose-invert değiştiricisini ve v4 varyantlarını kullanın.

Eklentiler sayfasında @plugin yönergesini ve yükleme ayrıntılarını görebilirsiniz.