تحميل tailwindcss typography - تنزيل كود مصدر tailwindcss typography

يوفر البرنامج الإضافي الرسمي لـ Tailwind CSS Typography مجموعة من فئات prose التي يمكنك استخدامها لإضافة إعدادات مطبعية جميلة إلى أي HTML فانيليا لا تتحكم فيه، مثل HTML المقدم من Markdown، أو المسحوب من CMS.

 < article class =" prose lg:prose-xl " > {{ markdown }} </ article >

لرؤية كيف يبدو الأمر أثناء اللعب، تحقق من العرض التوضيحي المباشر الخاص بنا على Tailwind Play.

تثبيت

قم بتثبيت البرنامج المساعد من npm:

npm install -D @tailwindcss/typography

ثم أضف المكوّن الإضافي إلى ملف tailwind.config.js الخاص بك:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

الاستخدام الأساسي

يمكنك الآن استخدام فئات prose لإضافة أنماط طباعة معقولة إلى أي HTML فانيليا:

 < article class =" prose lg:prose-xl " >
  < h1 > Garlic bread with cheese: What the science tells us </ h1 >
  < p >
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </ p >
  < p >
    But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
    springing up around the country.
  </ p >
  <!-- ... -->
</ article >

اختيار مقياس رمادي

يتضمن هذا المكون الإضافي فئة معدلة لكل من المقاييس الرمادية الخمسة التي يتضمنها Tailwind افتراضيًا حتى تتمكن بسهولة من تصميم المحتوى الخاص بك ليتوافق مع التدرجات الرمادية التي تستخدمها في مشروعك.

 < article class =" prose prose-slate " > {{ markdown }} </ article >

فيما يلي الفئات التي تم إنشاؤها باستخدام إصدار Tailwind CSS v2.0 الافتراضي تمامًا:

فصل	مقياس رمادي
`prose-gray` (افتراضي)	رمادي
`prose-slate`	لائحة
`prose-zinc`	الزنك
`prose-neutral`	حيادي
`prose-stone`	حجر

تم تصميم فئات المُعدِّلات لاستخدامها مع نمط المُعدِّل متعدد الفئات، ويجب استخدامها جنبًا إلى جنب مع فئة prose الأساسية.

ملحوظة

قم دائمًا بتضمين فئة prose عند إضافة مُعدِّل التدرج الرمادي

 < article class =" prose prose-stone " > {{ markdown }} </ article >

للتعرف على كيفية إنشاء سمات الألوان الخاصة بك، اقرأ وثائق إضافة سمات الألوان المخصصة.

تطبيق مقياس النوع

تسمح لك معدّلات الحجم بضبط الحجم الإجمالي لأسلوب الطباعة الخاص بك ليتناسب مع سياقات مختلفة.

 < article class =" prose prose-xl " > {{ markdown }} </ article >

يتم تضمين خمسة أحجام طباعة مختلفة خارج الصندوق:

فصل	حجم خط الجسم
`prose-sm`	0.875ريم (14 بكسل)
`prose-base` (افتراضي)	1ريم (16 بكسل)
`prose-lg`	1.125 ريم (18 بكسل)
`prose-xl`	1.25ريم (20 بكسل)
`prose-2xl`	1.5ريم (24 بكسل)

يمكن استخدامها مع معدِّلات نقاط التوقف في Tailwind لتغيير حجم الخط الإجمالي لجزء من المحتوى بأحجام مختلفة لإطار العرض:

 < article class =" prose md:prose-lg lg:prose-xl " > {{ markdown }} </ article >

تم ضبط كل شيء يتعلق بمعدِّلات الحجم المقدمة يدويًا بواسطة مصممين محترفين ليبدو جميلًا قدر الإمكان، بما في ذلك العلاقات بين أحجام الخطوط وتباعد العناوين وحشو كتلة التعليمات البرمجية والمزيد.

تم تصميم معدّلات الحجم لاستخدامها مع نمط التعديل متعدد الفئات ويجب استخدامها جنبًا إلى جنب مع فئة prose الأساسية.

ملحوظة

قم دائمًا بتضمين فئة prose عند إضافة مُعدِّل الحجم

 < article class =" prose prose-lg " > {{ markdown }} </ article >

لمعرفة المزيد حول تخصيص مقاييس الكتابة المضمنة، اقرأ الوثائق الخاصة بتخصيص CSS.

التكيف مع الوضع المظلم

يشتمل كل سمة ألوان افتراضية على إصدار الوضع المظلم المصمم يدويًا والذي يمكنك تشغيله عن طريق إضافة فئة prose-invert :

 < article class =" prose dark:prose-invert " > {{ markdown }} </ article >

للتعرف على كيفية إنشاء سمات الألوان الخاصة بك، اقرأ وثائق إضافة سمات الألوان المخصصة.

معدّلات العناصر

استخدم معدّلات العناصر لتخصيص نمط العناصر الفردية في المحتوى الخاص بك مباشرة في HTML الخاص بك:

 < article class =" prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600 " >
  {{ markdown }}
</ article >

وهذا يجعل من السهل القيام بأشياء مثل روابط الأنماط التي تتناسب مع علامتك التجارية، وإضافة نصف قطر حدودي للصور، وغير ذلك الكثير.

فيما يلي قائمة كاملة بمعدلات العناصر المتاحة:

المعدل	هدف
`prose-headings:{utility}`	`h1` ، `h2` ، `h3` ، `h4` ، `th`
`prose-lead:{utility}`	`[class~="lead"]`
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-p:{utility}`	`p`
`prose-a:{utility}`	`a`
`prose-blockquote:{utility}`	`blockquote`
`prose-figure:{utility}`	`figure`
`prose-figcaption:{utility}`	`figcaption`
`prose-strong:{utility}`	`strong`
`prose-em:{utility}`	`em`
`prose-kbd:{utility}`	`kbd`
`prose-code:{utility}`	`code`
`prose-pre:{utility}`	`pre`
`prose-ol:{utility}`	`ol`
`prose-ul:{utility}`	`ul`
`prose-li:{utility}`	`li`
`prose-table:{utility}`	`table`
`prose-thead:{utility}`	`thead`
`prose-tr:{utility}`	`tr`
`prose-th:{utility}`	`th`
`prose-td:{utility}`	`td`
`prose-img:{utility}`	`img`
`prose-video:{utility}`	`video`
`prose-hr:{utility}`	`hr`

عند تجميع هذه المعدلات مع معدلات أخرى مثل hover ، فأنت على الأرجح تريد أن يأتي المعدل الآخر أولاً:

 < article class =" prose prose-a:text-blue-600 hover:prose-a:text-blue-500 " > {{ markdown }} </ article >

اقرأ وثائق Tailwind CSS حول طلب المعدلات المكدسة لمعرفة المزيد.

تجاوز الحد الأقصى للعرض

يأتي كل معدّل حجم مزودًا بأقصى max-width مخبوز مصمم لإبقاء المحتوى قابلاً للقراءة قدر الإمكان. لكن هذا ليس ما تريده دائمًا، وفي بعض الأحيان قد ترغب في أن يملأ المحتوى عرض الحاوية الخاصة به فقط.

في هذه الحالات، كل ما عليك فعله هو إضافة max-w-none إلى المحتوى الخاص بك لتجاوز الحد الأقصى للعرض المضمن:

 < div class =" grid grid-cols-4 " >
  < div class =" col-span-1 " >
    <!-- ... -->
  </ div >
  < div class =" col-span-3 " >
    < article class =" prose max-w-none " > {{ markdown }} </ article >
  </ div >
</ div >

مواضيع متقدمة

التراجع عن أنماط الطباعة

إذا كان لديك كتلة من العلامات مضمنة في بعض المحتوى الذي لا ينبغي أن يرث أنماط prose ، فاستخدم فئة not-prose لوضعها في وضع الحماية:

 < article class =" prose " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-prose " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

لاحظ أنه لا يمكنك دمج أمثلة prose جديدة ضمن كتلة not-prose في هذا الوقت.

إضافة سمات الألوان المخصصة

يمكنك إنشاء سمة الألوان الخاصة بك عن طريق إضافة مفتاح جديد في قسم typography في ملف tailwind.config.js الخاص بك وتوفير الألوان الخاصة بك ضمن مفتاح css :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( { theme } ) => ( {
        pink : {
          css : {
            '--tw-prose-body' : theme ( 'colors.pink[800]' ) ,
            '--tw-prose-headings' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-lead' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-links' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-bold' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-counters' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-bullets' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-hr' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-quotes' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-quote-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-captions' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-code' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-pre-code' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-pre-bg' : theme ( 'colors.pink[900]' ) ,
            '--tw-prose-th-borders' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-td-borders' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-body' : theme ( 'colors.pink[200]' ) ,
            '--tw-prose-invert-headings' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-lead' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-links' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-bold' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-counters' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-bullets' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-hr' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-quotes' : theme ( 'colors.pink[100]' ) ,
            '--tw-prose-invert-quote-borders' : theme ( 'colors.pink[700]' ) ,
            '--tw-prose-invert-captions' : theme ( 'colors.pink[400]' ) ,
            '--tw-prose-invert-code' : theme ( 'colors.white' ) ,
            '--tw-prose-invert-pre-code' : theme ( 'colors.pink[300]' ) ,
            '--tw-prose-invert-pre-bg' : 'rgb(0 0 0 / 50%)' ,
            '--tw-prose-invert-th-borders' : theme ( 'colors.pink[600]' ) ,
            '--tw-prose-invert-td-borders' : theme ( 'colors.pink[700]' ) ,
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

راجع تعريفات النمط الداخلي لدينا للحصول على المزيد من الأمثلة.

تغيير اسم الفئة الافتراضية

إذا كنت بحاجة إلى استخدام اسم فئة آخر غير prose لأي سبب من الأسباب، فيمكنك القيام بذلك باستخدام خيار className عند تسجيل البرنامج الإضافي:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    // ...
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ( {
      className : 'wysiwyg' ,
    } ) ,
  ]
  . . .
}

الآن سيتم استبدال كل نسخة prose في أسماء الفئات الافتراضية باسم فئتك المخصصة:

 < article class =" wysiwyg wysiwyg-slate lg:wysiwyg-xl " >
  < h1 > My Heading </ h1 >
  < p > ... </ p >

  < div class =" not-wysiwyg " >
    <!-- Some example or demo that needs to be prose-free -->
  </ div >

  < p > ... </ p >
  <!-- ... -->
</ article >

تخصيص CSS

إذا كنت تريد تخصيص ملف CSS الأولي الذي تم إنشاؤه بواسطة هذا البرنامج الإضافي، فأضف تجاوزاتك أسفل مفتاح typography في قسم theme في ملف tailwind.config.js الخاص بك:

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : {
        DEFAULT : {
          css : {
            color : '#333' ,
            a : {
              color : '#3182ce' ,
              '&:hover' : {
                color : '#2c5282' ,
              } ,
            } ,
          } ,
        } ,
      } ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

كما هو الحال مع جميع تخصيصات السمات في Tailwind، يمكنك أيضًا تحديد مفتاح typography كوظيفة إذا كنت بحاجة إلى الوصول إلى مساعد theme :

 /** @type {import('tailwindcss').Config} */
module . exports = {
  theme : {
    extend : {
      typography : ( theme ) => ( {
        DEFAULT : {
          css : {
            color : theme ( 'colors.gray.800' ) ,

            // ...
          } ,
        } ,
      } ) ,
    } ,
  } ,
  plugins : [
    require ( '@tailwindcss/typography' ) ,
    // ...
  ] ,
}

يجب تطبيق التخصيصات على معدّل محدد مثل DEFAULT أو xl ، ويجب إضافتها ضمن خاصية css . تتم تأليف التخصيصات بنفس بنية CSS-in-JS المستخدمة لكتابة مكونات Tailwind الإضافية.

راجع الأنماط الافتراضية لهذا البرنامج الإضافي للحصول على أمثلة أكثر تفصيلاً لتكوين كل معدّل.