(Tailwind) Purge – انجمن DEV

این اولین مورد از یک سری است¹ از چیزهایی که سرم را در کار روزانه آژانس، به عنوان یک بدنه تمام عیار، یا هر آنچه که در آن زمان مشغول به کار هستم، سرم زده ام. در آژانس‌ها، بسته به اینکه چه کسی پرداخت می‌کند، معمولاً به مشتریان فروخته می‌شوید، از معمار نرم‌افزار گرفته تا طراح UX تا مدیر DB.

و هر کس در اینجا که تا به حال در مورد دودکش ها یا غلات صبحانه یا هر چیز دیگری با من صحبت کرده باشد، می داند که من در مورد Tailwind چه احساسی دارم.

بنابراین بگویید من دو صفحه دارم که یکی از آنها (من آن را “درباره” می نامم) شامل چیزی شبیه به این است:

<div class="grid grid-cols-5">
  <div class="col-span-5 lg:col-span-3">

و دیگری (من آن را “بابوت” می نامم) این را دارد:

<div class="grid grid-cols-5">
  <div class={`col-span-${data.image ? 5 : 3}`}>

ایده این است که اگر صفحه Babout من یک تصویر داشته باشد، آن ستون باید تمام عرض را بگیرد، در غیر این صورت باید فضای کمتری را اشغال کند تا فضایی برای تصویر گربه آینده ایجاد کند. به نظرم خوبه آثار.

و اگر صفحه About را لغو انتشار کنم، صفحه Babout طراحی شبکه خود را متوقف می کند اصلا.

چرا؟ خوب، به خاطر Tailwind است پاکسازی ها قوانین CSS آن، بنابراین شما هر جایگشت احتمالی چیزهایی مانند این را دانلود نکنید lg:p:mx-5. اگر همه آنها را تولید می کردید، قوانین بیشتری نسبت به دانه های نمک در شام ماهی وجود داشت. دلیلش این است که فریم ورک‌های کلاس کاربردی یک هستند ایده واقعا بد، اما من پرت می شوم.

چرا پاکسازی CSS صفحه ضعیف Babout را می شکند؟ زیرا پاکسازی توسط خراش دادن فایل های منبع برای همه موارد منطبق با قوانین ممکن این بدان معناست که اگر صفحه وبلاگی دارید که در مورد مزدا MX-5 جدید و براق شما صحبت می کند، هی، اکنون Tailwind شامل mx-5 صرف نظر از اینکه از آن استفاده می کنید، حکومت کنید. نیاتو.

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

مهمتر از آن، به این معنی است که چون نمی تواند پیدا کند col-span-3 یا col-span-5 در سورس دیگر به دردشان نمی خورد و صفحه خراب می شود.

راه حل ها زمانی ساده هستند که آنها را بشناسید:

1. استفاده کنید ${data.image ? 'col-span-5' : 'col-span-3'} بجای
2. اضافه کردن col-span-3 و col-span-5 به tailwind’s “safelist”

اما وقتی آنها را نشناسید ساده نیستند.

بله، در مستندات Tailwind به این موضوع اشاره شده است، اما در زیر ماسه مدفون است.

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

1. شاید. من سابقه خوبی برای پایبندی به قطعنامه ها ندارم. ↩