سرفصل 1

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

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

در واقع، ما شکایات زیادی درباره آن دریافت می‌کنیم، با افرادی که مرتباً از ما چیزهایی مثل این می‌پرسند:

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

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

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

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

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

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

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

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

حالا می‌خواهیم یک سبک هدر دیگر را امتحان کنیم.

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

این هم یک هدر برای شماست — با کمی شانس اگر کارمان را درست انجام داده باشیم این باید نسبتاً خوب به نظر برسد.

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

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

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

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

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

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

اگر تیترها را روی هم بگذاریم چه می‌شود؟

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

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

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

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

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

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

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

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

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

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

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

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

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

فکر می‌کنم اکثر مردم از highlight.js یا Prism یا چیزی برای استایل دادن به بلوک‌های کد خود استفاده می‌کنند اما بد نیست که آنها به طور پیش‌فرض خوب به نظر برسند، حتی بدون برجسته‌سازی سینتکس.

در اینجا یک فایل پیش‌فرض 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 در تیترها استفاده می‌کنم.

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

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

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

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

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

ما هنوز باید در مورد تیترهای روی هم فکر کنیم.

بیایید مطمئن شویم که با h4 عناصر هم آن را خراب نمی‌کنیم.

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

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

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