عنوان ۱

تا به حال، تلاش برای استایل‌دهی به یک مقاله، سند، یا پست وبلاگ با استفاده از Tailwind کاری خسته‌کننده بوده که نیاز به دقت بالا در تایپوگرافی و بسیاری از CSS سفارشی پیچیده دارد.

به‌طور پیش‌فرض، Tailwind تمام استایل‌های پیش‌فرض مرورگر را از پاراگراف‌ها، سرفصل‌ها، لیست‌ها و غیره حذف می‌کند. این موضوع برای ساخت رابط‌های کاربری اپلیکیشن بسیار مفید است زیرا زمان کمتری را برای لغو استایل‌های مربوط به user-agent صرف می‌کنید، اما زمانی که شما واقعاً قصد دارید محتوای واردشده از یک ویرایشگر متن غنی در CMS یا یک فایل markdown را استایل‌دهی کنید، می‌تواند شگفت‌انگیز و غیرقابل پیش‌بینی باشد.

در واقع شکایات زیادی در این مورد دریافت می‌کنیم، با افرادی که به طور منظم از ما می‌پرسند:

چرا Tailwind استایل‌های پیش‌فرض روی عناصر h1 من را حذف می‌کند؟ چطور می‌توانم این را غیرفعال کنم؟ منظورتان از این که تمام استایل‌های پایه دیگر را هم از دست می‌دهم چیست؟

ما صدای شما را می‌شنویم، اما قانع نشده‌ایم که صرفاً غیرفعال کردن استایل‌های پایه ما همان چیزی است که شما واقعاً می‌خواهید. شما نمی‌خواهید هر بار که از یک عنصر p در رابط کاربری داشبوردتان استفاده می‌کنید، مجبور به حذف حاشیه‌های آزاردهنده شوید. و بعید می‌دانم واقعاً بخواهید پست‌های وبلاگتان از استایل‌های user-agent استفاده کنند — شما می‌خواهید آن‌ها عالی به نظر برسند، نه وحشتناک.

پلاگین @tailwindcss/typography تلاش ماست برای ارائه چیزی که شما واقعا می‌خواهید، بدون هیچ‌کدام از معایب انجام کاری احمقانه مانند غیرفعال کردن استایل‌های پایه ما.

این پلاگین یک کلاس جدید به نام prose اضافه می‌کند که می‌توانید آن را به هر بلوک محتوای HTML خام اعمال کنید و آن را به یک سند زیبا و با فرمت مناسب تبدیل کنید:

<article className="prose">
<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>

برای اطلاعات بیشتر در مورد نحوه استفاده از این پلاگین و ویژگی‌های آن، مستندات را بخوانید.

چه انتظاری از اینجا به بعد داشته باشیم

آنچه که در ادامه آمده صرفاً مجموعه‌ای از مزخرفاتی است که من برای تست پلاگین نوشتم. این شامل تمام عناصر تایپوگرافی معقولی است که به ذهنم رسید، مانند متن پررنگ، لیست‌های نامرتب، لیست‌های مرتب، بلوک‌های کد، نقل‌قول‌های بلوکی، و حتی ایتالیک‌ها.

پوشش دادن تمام این موارد برای چند دلیل مهم است:

1. ما می‌خواهیم همه چیز به طور پیش‌فرض خوب به نظر برسد.
2. در واقع تنها دلیل اول است، هدف اصلی پلاگین همین است.
3. البته یک دلیل فرضی سوم هم داریم که لیست با سه آیتم از لیست با دو آیتم واقعی‌تر به نظر می‌رسد.

حالا قصد داریم یک استایل دیگر برای عنوان آزمایش کنیم.

تایپوگرافی باید آسان باشد

پس این یک عنوان برای شماست — با کمی شانس اگر کارمان را درست انجام داده باشیم، این باید به طور معقولی به نظر برسد.

چیزی که یک فرد خردمند یک بار به من گفت درباره تایپوگرافی این بود که:

تایپوگرافی خیلی مهم است اگر نمی‌خواهید کارهای شما شبیه زباله به نظر برسد. آن را خوب بسازید تا بد نباشد.

احتمالاً مهم است که تصاویر به طور پیش‌فرض اینجا به خوبی به نظر برسند:

حالا قصد دارم یک مثال از یک لیست نامرتب نشان دهم تا مطمئن شویم که آن هم خوب به نظر می‌رسد:

• این اولین آیتم در این لیست است.
• در این مثال، ما موارد را کوتاه نگه می‌داریم.
• بعداً از آیتم‌های لیست طولانی‌تر و پیچیده‌تری استفاده خواهیم کرد.

و این پایان این بخش است.

اگر عنوان‌ها را روی هم بچینیم چه می‌شود؟

باید مطمئن شویم که آن هم خوب به نظر برسد.

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

وقتی عنوان بعد از یک پاراگراف می‌آید …

وقتی یک عنوان بعد از یک پاراگراف می‌آید، ما به مقداری فضای بیشتر نیاز داریم، همانطور که قبلاً ذکر کردم. حالا بیایید ببینیم که یک لیست پیچیده‌تر چه شکلی خواهد بود.

• من اغلب این کار را می‌کنم که در موارد لیست، عنوان‌هایی داشته باشم.

  به دلایلی فکر می‌کنم این به نظر جالب می‌آید، که متاسفانه چون درست کردن استایل‌ها برای آن سخت است.

  من اغلب دو یا سه پاراگراف در این آیتم‌های لیست دارم، بنابراین قسمت سخت این است که فاصله بین پاراگراف‌ها، عنوان آیتم لیست و جدا کردن آیتم‌های مختلف لیست را به درستی تنظیم کنیم. حقیقتاً این کار دشواری است، شما می‌توانید استدلال کنید که شاید نباید اینطور نوشت.

• چون این یک لیست است، من حداقل به دو آیتم نیاز دارم.

  من قبلاً در مورد کاری که انجام می‌دهم در آیتم قبلی توضیح داده‌ام، اما لیست اگر فقط یک آیتم داشته باشد، دیگر لیست نیست، و ما واقعاً می‌خواهیم این به نظر واقعی بیاید. به همین دلیل است که من این آیتم دوم را اضافه کرده‌ام تا وقتی استایل‌ها را می‌نویسم چیزی برای نگاه کردن داشته باشم.

• اضافه کردن یک آیتم سوم هم ایده بدی نیست.

  فکر می‌کنم احتمالاً استفاده از دو آیتم کافی بود، اما سه آیتم قطعاً بدتر نیست، و از آنجایی که به نظر می‌رسد در ساختن موارد تصادفی مشکلی ندارم، بهتر است آن را اضافه کنم.

بعد از چنین لیستی معمولاً یک جمله یا پاراگراف پایانی دارم، چون پرش مستقیم به یک عنوان کمی عجیب به نظر می‌رسد.

کد باید به طور پیش‌فرض خوب به نظر برسد.

فکر می‌کنم بیشتر مردم از highlight.js یا Prism یا چیزی مشابه استفاده خواهند کرد اگر بخواهند بلوک‌های کد خود را استایل‌دهی کنند، اما ضرری ندارد که آن‌ها به صورت پیش‌فرض خوب به نظر برسند، حتی بدون هایلایت کردن نحو (syntax highlighting).

اینجا چیزی است که یک فایل پیش‌فرض tailwind.config.js به نظر می‌رسد در زمان نوشتن:

module.exports = {
    purge: [],
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}

امیدوارم این به اندازه کافی خوب به نظر برسد.

نظر شما درباره لیست‌های تو در تو چیست؟

لیست‌های تو در تو معمولاً بد به نظر می‌رسند و به همین دلیل است که ویرایشگرهایی مثل Medium حتی اجازه نمی‌دهند شما از آنها استفاده کنید. اما فکر می‌کنم از آنجایی که بعضی از شما احتمالاً این کار را خواهید کرد، باید حداقل تلاش کنیم که این وضعیت کار کند.

1. لیست‌های تو در تو به ندرت ایده خوبی هستند.
   • ممکن است فکر کنید که خیلی "منظم" هستید یا چیزی شبیه به آن، اما شما فقط یک شکل ناخوشایند روی صفحه ایجاد می‌کنید که خواندنش سخت است.
   • ناوبری تو در تو در رابط‌های کاربری هم ایده بدی است. سعی کنید هر چیزی را تا حد ممکن مسطح نگه دارید.
   • تو در تو کردن تعداد زیادی پوشه در کد منبع شما هم مفید نیست.
2. از آنجا که به موارد بیشتری نیاز داریم، در اینجا یک مورد دیگر است.
   • مطمئن نیستم که بخواهیم بیش از دو سطح عمق را استایل دهیم.
   • دو سطح از آن هم بیشتر است، سه سطح قطعاً ایده بدی است.
   • اگر چهار سطح تو در تو کنید، جای شما در زندان است.
3. دو مورد واقعاً یک لیست نیستند، سه مورد خوب هستند.
   • دوباره، لطفاً لیست‌ها را تو در تو نکنید اگر می‌خواهید مردم واقعاً محتوای شما را بخوانند.
   • هیچ‌کس نمی‌خواهد این را ببیند.
   • ناراحت هستم که باید حتی برای استایل دهی به این وقت بگذاریم.

مزاحم‌ترین چیزی که در مورد لیست‌ها در Markdown وجود دارد این است که <li> عناصر هیچ <p> فرزند ندارند، مگر اینکه چند پاراگراف در آیتم لیست باشد. این یعنی باید نگران استایل دهی به این وضعیت آزاردهنده هم باشم.

• به عنوان مثال، در اینجا یک لیست تو در تو دیگر است.

  اما این بار با یک پاراگراف دوم.

  • این آیتم‌های لیست <p> تگ ندارند
  • چون هر کدام تنها یک خط دارند

• اما در این آیتم دوم سطح اول، آنها خواهند داشت.

  این مخصوصاً آزاردهنده است به خاطر فاصله در این پاراگراف.

  • همانطور که در اینجا می‌بینید، چون یک خط دوم اضافه کرده‌ام، این آیتم لیست حالا تگ <p> دارد.

    این همان خط دومی است که دارم در موردش صحبت می‌کنم.

  • در نهایت در اینجا یک آیتم لیست دیگر است تا بیشتر شبیه به یک لیست باشد.

• یک آیتم لیست پایانی، اما بدون لیست تو در تو، چون چرا که نه؟

و در نهایت یک جمله برای بستن این بخش.

عناصر دیگری هم داریم که باید استایل دهیم

تقریباً فراموش کرده بودم که لینک‌ها را ذکر کنم، مانند این لینک به وب‌سایت Tailwind CSS. تقریباً آنها را آبی کردیم اما این دیگر قدیمی شده است، پس به رنگ خاکی تیره رفتیم، که حس بیشتری دارد.

ما حتی استایل‌هایی برای جدول‌ها هم گنجانده‌ایم، نگاهی بیندازید:

همچنین باید اطمینان حاصل کنیم که کدهای درون‌خطی به درستی نمایش داده شوند، مثل زمانی که بخواهم در مورد عناصر <span> صحبت کنم یا اخبار خوب را درباره @tailwindcss/typography به شما بگویم.

گاهی اوقات حتی از code در عنوان‌ها استفاده می‌کنم

گرچه احتمالاً ایده خوبی نیست و در گذشته سختی‌هایی برای زیبا کردن آن داشتم. اما این ترفند "کدها را در backticks قرار بده" واقعاً خوب عمل می‌کند.

چیز دیگری که در گذشته امتحان کرده‌ام این است که یک تگ code را داخل یک لینک قرار دهم، مثل زمانی که بخواهم در مورد مخزن tailwindcss/docs صحبت کنم. من زیاد از اینکه زیر backticks خط زیرین باشد خوشم نمی‌آید، اما قطعاً ارزش دیوانگی‌هایی که برای اجتناب از آن لازم است را ندارد.

هنوز از h4 استفاده نکرده‌ایم

اما حالا استفاده کرده‌ایم. لطفاً از h5 یا h6 در محتوای خود استفاده نکنید، Medium تنها از دو سطح عنوان پشتیبانی می‌کند به دلایلی، حیوانات. من راستش فکر کردم که از یک عنصر شبه‌قبل before استفاده کنم تا اگر از h5 یا h6 استفاده کردید، به شما هشدار بدهم.

ما این‌ها را از جعبه به طور پیش‌فرض استایل نمی‌دهیم زیرا عناصر h4 آنقدر کوچک هستند که اندازه‌شان برابر با متن بدنه است. قرار است با یک h5 چه کنیم، آن را کوچکتر از متن بدنه کنیم؟ نه مرسی.

اما هنوز باید در مورد عناوین پشته‌ای فکر کنیم.

بیایید اطمینان حاصل کنیم که این را هم با عناصر h4 خراب نکنیم.

اوه، امیدوارم که عناوین بالای این متن به خوبی استایل داده شده و زیبا به نظر برسند.

بیایید یک پاراگراف پایانی اضافه کنیم تا کارها با یک بلوک متن به اندازه معقول تمام شود. نمی‌توانم توضیح دهم چرا می‌خواهم کارها اینطور تمام شوند اما باید فرض کنم چون فکر می‌کنم اگر یک عنوان خیلی نزدیک به انتهای سند باشد، چیزها عجیب یا نامتعادل به نظر می‌رسند.

آنچه که من اینجا نوشته‌ام احتمالاً به اندازه کافی طولانی است، اما افزودن این جمله پایانی آسیبی نمی‌زند.