Tailwind Safelist راهکاری برای مدیریت کلاس های پویا

Tailwind CSS یکی از فریمورک های مطرح است که به توسعه دهنده اجازه می دهد با استفاده از کلاس های از پیش تولید شده اقدام به ایجاد قالب های سفارشی کند. به همین دلیل است که Tailwind CSS از طیف وسیعی از کلاس ها پشتیبانی می کند که همین امر موجب ایجاد فایلی با حجم بالا می شود. برای حل این مشکل Tailwind CSS از یک ویژگی به نام PurgeCSS استفاده می کند که می تواند پس از ایجاد برنامه با پایش تمام فایل هایی که در فایل Config اعلام شده است، لیست کلاس های استفاده شده را شناسایی و کلاس های اضافی را از فایل نهایی حذف کند که این ویژگی منجر به ایجاد فایل نهایی به مراتب کوچک تر و سبک تر خواهد شد. با این وجود این ویژگی توانایی تشخیص کلاس هایی که بصورت شرطی و پویا ایجاد می شوند و یا کلاس هایی که از دیتابیس خوانده می شوند را ندارد. برای حل این مشکل Tailwind CSS از ویژگی دیگری به نام Safelist استفاده می کند که در این آموزش نحوه استفاده از آن را فرا می‌گیریم.

Tailwind Safelist چیست؟

Safelist یکی از ویژگی های Tailwind CSS است که برای تعریف کلاس هایی که توسط PurgeCSS تشخیص داده نمی شوند و از فایل نهایی حذف می شوند، استفاده می شود. معمولا کلاس هایی که بصورت پویا و بر اساس شرایط و یا از داخل بانک اطلاعاتی ایجاد می شوند، در پروسه PurgeCSS شناسایی نمی شوند. یکی از حالات معمول در این چالش، زمانی است که برنامه نویس رنگ هارا از سمت بک اند برای کاربر ارسال می کند یا زمانی که سیستم به مدیر اختیار تغییر رنگ در بخش های مختلف را می دهد. طبیعتا Tailwind توانایی تشخیص این کلاس ها را نداشته و در UI برنامه این کلاس ها نمایش داده نمی شوند. حال با اضافه کردن نام این کلاس ها به Safelist می توانید مطمئن باشید که چه این کلاس ها در پروسه PurgeCSS پیدا شوند چه نشوند از فایل نهایی شما حذف نخواهند شد.چگونه کلاس را در Tailwind Safelist اضافه کنیم؟برای افزودن کلاس به Safelist باید فایل tailwind.config.js را تغییر دهید. در این فایل آرایه ای از کلاس هایی که می خواهید از فایل نهایی حذف نشوند، بعنوان Safelist اضافه می کنید.

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

در این مثال کلاس های bg-red-500 و text-white و hover:bg-red-700 حتی در صورتی که در پروسه PurgeCSS پیدا نشوند، از فایل نهایی حذف نخواهند شد.

اما این آخر ماجرا نیست!

Tailwind CSS اما به همین بسنده نکرده است و برای افزایش کارایی و خوانایی برنامه، در قسمت Safelist پشتیبانی از Regex را نیز افزوده است. با این ویژگی اضافه کردن variants/modifiers و یا چندین رنگ، بسیار سریع و به سادگی قابل تعریف می باشد و از حجیم شدن لیست Safelist جلوگیری می کند. در زیر نمونه ای از استفاده Regex در Safelist را می بینید:

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

با این روش بطور موثری ما 12 کلاس را به Safelist اضافه کردیم. این روش مدیریت لیست Safelist را به مراتب آسان تر و خواناتر می کند. همچنین همانگونه که در کد زیر می بینید امکان تعریف variant ها بدون تعریف Regex جدا قابل انجام است:

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

خلاصه چی گفتیم؟

Safelist ویژگی مفید Tailwind CSS است که برای اضافه نمودن کلاس هایی که در پروسه PurgeCSS تشخیص داده نمی شوند، استفاده می شود. با درک و استفاده از این ویژگی در سناریوهای مختلفی که ممکن است در طول برنامه رخ بدهد، توسعه دهنده یک پروژه قوی و قابل اطمینان خواهد داشت. با انجام چندین تمرین در سناریوهای مختلف، مطمئن شوید که فایل CSS نهایی شما کوچک و قابل اجرا خواهد بود.