چطور نام کلاس هایی که به صورت داینامیک درست می شوند را به خروجی tailwind اضافه کنیم؟

کد زیر را در نظر بگیرید:

      <div id="myEl">
</div>
<script>
const el = document.getElementById("myEl");
const screen = "sm"
const visibility = "hidden"
el.className = screen +":" + visibility
</script>
    

در این کد می خواهیم المان را برای صفحه های sm مخفی کنیم. ولی با اجرای بیلد تیلویند، برنامه عمکرد مورد نظر را نخواهد داشت. چون در زمان بیلد با اسکن فایل ما، قادر به پیدا کردن کلاس sm:hidden نیست و این کلاس در زمان اجرا ایجاد می شود. برای حل مشکل می توانیم از روش های زیر عمل کنیم:

1. استفاده صریح از sm:hidden

      <div id="myEl">
</div>
<script>
const el = document.getElementById("myEl");
el.className = someCondition ? "sm:hidden": "sm:block"
</script>
    

2. اضافه کردن sm:hidden به safelist در تنظمات تیلویند:

      // taildwind.config.ts

const config: Config = {
  safelist: [
    "sm:hidden"
  ]
}
    

با این کار sm:hidden همیشه به خروجی تیلویند اضافه می شود. حتی در صورتی که در هیچ جایی استفاده نشده باشد.