إضافة الطباعة

عرض بتنسيق Markdown التعديل على GitHub التوثيق في 3843abd

@tailwindcss/typography نسخة مطابقة بنسبة 1:1 من PHP الإضافة الرسمية للطباعة. تضيف فئة prose ومعدّلاتها لتطبيق إعدادات طباعية سهلة القراءة على كتلة من محتوى HTML المعروض — مثل العناوين والفقرات والقوائم والاقتباسات البرمجية والأكواد والجداول وغيرها — دون تنسيق كل عنصر يدويًا.

الاستخدام

حمّل الإضافة باستخدام @plugin واستورد طبقة الأدوات، ثم طبّق prose على الحاوية التي تضم محتواك:

PHP

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

تعرّف القاعدة المُنشأة .prose خصائص مخصصة --tw-prose-* (--tw-prose-body و--tw-prose-headings و--tw-prose-links و--tw-prose-code و--tw-prose-quotes وغيرها)، وتنسّق العناصر التابعة باستخدامها.

الفئات

الأحجام

تغيّر معدّلات الحجم مقياس تدرج الأحجام الطباعية بالكامل. وتُستخدم إلى جانب الفئة الأساسية prose:

الفئة	الغرض
`prose`	الحجم الافتراضي
`prose-sm`	صغير
`prose-base`	أساسي
`prose-lg`	كبير
`prose-xl`	كبير جدًا
`prose-2xl`	أكبر بمقدار 2×

HTML

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

سمات الألوان

تبدّل معدّلات اللون درجات الرمادي المستخدمة لنص المتن والعناوين والحدود:

الفئة	السمة
`prose-slate`	Slate
`prose-gray`	Gray
`prose-zinc`	Zinc
`prose-neutral`	Neutral
`prose-stone`	Stone

عكس الألوان

تعكس prose-invert لوحة الألوان للاستخدام على الخلفيات الداكنة. يمكنك دمجها بحرية مع معدّلات الحجم واللون:

HTML

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

الخيارات

`className`

ينشئ الملحق افتراضيًا الفئة prose. عيّن className لإعادة تسميتها — وتتبعها المعدّلات بالاسم الجديد (markdown وmarkdown-lg وmarkdown-invert، …). وعند تعيين هذا الخيار، لا تُنشأ فئات prose:

PHP

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

ملاحظات

تُسجّل معدّلات العناصر مثل prose-headings:underline أو prose-a:text-blue-600، لكنها تُترجم في الإصدار الحالي من دون محدد العنصر؛ لذا تُطبّق الأداة على حاوية prose بأكملها بدلًا من العناوين أو الروابط داخلها (#10). نسّق هذه العناصر باستخدام CSS الخاصة بك إلى أن يتوفر الإصلاح.

هذا نقل TailwindCSS لـ v4. تعمل بعض سلوكيات v3-specific في الإضافة الأصلية بشكل مختلف في v4 وغير مدعومة هنا، ومنها الوضع الداكن باستخدام محدد .dark وبعض تنسيقات إعدادات متغيرات العناصر؛ استخدم المعدِّل prose-invert ومتغيرات v4 بدلًا منها.

راجع الإضافات لمعرفة توجيه @plugin وتفاصيل التحميل.