افزونه Tailwind CSS Typography

پیش نیاز این جلسه، مقاله زیباسازی Typography پست، بدون ذره‌ای استفاده از کلاس‌های Tailwind لطفا مطالعه کنید .

افزونه Tailwind CSS Typography یک ابزار است که به شما کمک می‌کند تا به راحتی استایل‌های زیبا و خوانا را به متون خود اضافه کنید. این افزونه به ویژه برای مواقعی مفید است که شما بر روی HTMLهای ساده کار می‌کنید که کنترل چندانی بر روی آن‌ها ندارید، مثلاً HTMLهایی که از Markdown تولید شده‌اند یا از یک سیستم مدیریت محتوا (CMS) دریافت می‌شوند.

فرض کنید شما یک مقاله‌ای دارید که با استفاده از Markdown نوشته شده است. برای اینکه این مقاله به شکلی زیبا نمایش داده شود، می‌توانید از کلاس‌های این افزونه استفاده کنید. مثلاً:

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

این خط کد به مرورگر می‌گوید که متن داخل این تگ با استایل‌های خاصی نمایش داده شود که افزونه ارائه می‌دهد. برای دیدن نمونه کارکرد این افزونه، می‌توانید به دموی زنده در Tailwind Play مراجعه کنید.

نصب افزونه Tailwind CSS Typography

برای نصب این افزونه، کافیست دستور زیر را در ترمینال خود اجرا کنید:

npm install -D @tailwindcss/typography

سپس باید افزونه را به فایل تنظیمات Tailwind خود اضافه کنید:

// tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require('@tailwindcss/typography'),
        // ...
    ],
}

نحوه استفاده افزونه Tailwind CSS Typography

استفاده از کلاس‌های نثر: برای اضافه کردن استایل به متن، از کلاس‌های نثر prose استفاده کنید. مثلا:

<article class="prose lg:prose-xl">
    <h1>عنوان مقاله</h1>
    <p>متن مقاله...</p>
</article>

با این کد، متن داخل تگ <article></article> به صورت زیبا و خوانا نمایش داده می‌شود. تنظیم رنگ متن: می‌توانید از رنگ‌های مختلف خاکستری برای افزایش جذابیت و خوانایی متن خود استفاده کنید. مثلا:

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

در اینجا، متن به رنگ خاکستری سربی نمایش داده می‌شود. تنظیم اندازه متن: اندازه متن‌ها را می‌توان تغییر داد. مثلا:

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

این کد سایز تمام تگ های متن را بزرگ‌تر از حالت عادی نشان می‌دهد.

کلاس‌های مفید

رنگ‌ها متن:

prose-gray خاکستری (پیش‌فرض)
prose-slate سربی
prose-zinc روی
prose-neutral خنثی
prose-stone سنگی

اندازه‌های متن:

prose-sm کوچک
prose-base عادی (پیش‌فرض)
prose-lg بزرگ
prose-xl خیلی بزرگ
prose-2xl فوق‌العاده بزرگ

سازگاری با حالت تاریک

افزونه Tailwind CSS Typography به شما امکان می‌دهد که متون خود را در حالت تاریک (Dark Mode) به صورت زیبا نمایش دهید. برای این کار، می‌توانید از کلاس prose-invert استفاده کنید. این کلاس باعث می‌شود که رنگ متن‌ها در حالت تاریک تغییر کند تا متن بهتر دیده شوند.مثال:

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

این کد می‌گوید که وقتی حالت تاریک فعال است، از استایل prose-invert استفاده کن.

تغییر استایل عناصر خاص

شما می‌توانید با کمک پلاگین تایپوگرافی استایل‌های خاصی را به عناصر مختلف متن خود اعمال کنید. برای این کار از تغییردهنده‌های عناصر استفاده می‌شود. مثلاً:

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

در این مثال:

prose-img:rounded-xl باعث می‌شود تصاویر لبه‌های گرد داشته باشند.
prose-headings:underline باعث می‌شود سرعنوان‌ها (مثل h1، h2) زیرخط دار شوند.
prose-a:text-blue-600 لینک‌ها را به رنگ آبی در می‌آورد.

لیست کامل تغییردهنده‌های عناصر

در اینجا لیست کامل تغییردهنده‌های اجزا را می‌بینید که می‌توانید برای عناصر مختلف متن استفاده کنید:

تغییردهنده(Modifier)	هدف(Target)
`prose-headings:{utility}`	`h1`، `h2`، `h3`، `h4`، `h5`, `h6` ,`th`
`prose-lead:{utility}`	`[class~="lead"]` برای نمایش دادن تگ متمایز از دیگر تگ های مثل اون در متن باید lead رو به آن اضافه کنید.مثل مهمترین پاراگراف بین پاراگراف ها
`prose-h1:{utility}`	`h1`
`prose-h2:{utility}`	`h2`
`prose-h3:{utility}`	`h3`
`prose-h4:{utility}`	`h4`
`prose-h5:{utility}`	`h5`
`prose-h6:{utility}`	`h6`
`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`

تنظیم حداکثر عرض متن در پلاگین تایپوگرافی

در پلاگین تایپوگرافی به طور پیش فرض، اندازه متن‌ها با حداکثر عرض تنظیم شده است تا خوانایی بهتری داشته باشد. اما ما گاهی ممکن است بخواهیم متن تمام عرض موجود را پر کند. در این موارد، از کلاس 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>

این کد می‌گوید که متن داخل article حداکثر عرض نداشته باشد و تمام عرض موجود را پر کند.

طراحی واکنشگرا با افزونه Typography

می خواهیم اندازه فونت این متن را در اندازه های مختلف تغییر دهیم. برای مثال، در صفحات بزرگتر، می خواهیم اندازه فونت بزرگتری داشته باشیم. برای این کار، از تغییر دهنده های نقطه شکست (Breakpoints Modifier ) Tailwind استفاده می کنیم. به کلاس prose که قبلا اضافه کردیم، تغییر دهنده های مورد نظر را اضافه می کنیم:

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

در این مثال، با استفاده از تغییر دهنده های md:prose-lg و lg:prose-xl، اندازه فونت متن در اندازه های مختلف صفحات تغییر خواهد کرد.

استفاده از Modifier

می خواهیم اندازه فونت تگ aاین متن را در وقتی که روی آن ها هاور می کنیم تغییر دهیم. برای این کار، از تغییر دهنده‌ها(Modifiers) hover و prose-a استفاده می کنیم. به کلاس prose که قبلا اضافه کردیم، تغییر دهنده مورد نظر را اضافه می کنیم:

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

در این مثال، با استفاده از تغییر دهنده hover:prose-a:text-xl، وقتی روی تگ a متن ها هاور می کنیم، اندازه فونت آنها به text-xl تغییر خواهد کرد.

نکات مهم

همیشه از کلاس اصلی prose همراه با تغییر دهنده‌ها(Modifiers) استفاده کنید.
برای اطلاعات بیشتر درباره سفارشی‌سازی رنگ و اندازه‌ها، می‌توانید مستندات رسمی را بخوانید. این توضیحات به شما کمک می‌کند تا به راحتی از پلاگین Tailwind CSS Typography استفاده کنید و متون خود را زیبا و حرفه‌ای نمایش دهید.

ممنون دنبال کردید.