در توسعه پروژه اخیر با Nextjs و Tailwind به یک مشکلی برخوردم که حلش یه کم زمان برد . حین جستجو برای رسیدن به راه حل، با نکته های جالبی در استفاده از Tailwindcss آشنا شدم که به نظرم ارزش دانستن داشتند. در این مقاله یکی از نکته ها رو با شما به اشتراک میگذارم.
یه متغیر داشتم به اسم isActive از نوع boolean و یک span داشتم حاوی یک متن کوتاه.
مقدار متغیر isActive مشخص میکرد که محتوای span چطوری نمایش داده بشه.
بنابر این کدم رو اینطوری نوشتم:
وقتی پروژه اجرا میشد هیچ اتفاقی نمی افتاد. یعنی مقدار isActive تغییر میکرد ولی اصلا انگار نه انگار.
داخل developer tools لیست کلاس های div رو نگاه کردم. دیدم کلاس text-[400] و text-[800] هستند ولی در css نهایی اصلا وجود ندارند. یعنی tailwind این کلاس ها رو نساخته.
علت:
وقتی از Tailwind استفاده میکنیم و میخواد فایل css خودش رو بسازه، محتوای فایل های پروژه رو بر اساس تنظیمات tailwind.config.ts نگاه میکنه و هر اسم کلاسی رو که پیدا کنه به لیست نهاییش اضافه میکنه.
وقتی ما اسم کلاس ها رو نصفه استاتیک و نصفه داینامیک میسازیم، Tailwind نمیتونه تشخیص بده در زمان runtime این قراره اسم کامل یک کلاس بشه و ازش عبور میکنه. در نتیجه کلاس رو به css نهاییش اضافه نمیکنه.
راه حل:
وقتی از Tailwind استفاده میکنیم، کلاس های داینامیک رو به شکل بالا که اسم کلاس نصفه است نباید بسازیم. اسم کامل کلاس ها رو در شرایط مختلف باید استفاده کنیم:
مشکلم حل شد.
در مورد ساختن اسم کلاس ها به کمک props هم همین مسئله رو باید دقت کنیم.
برای ساختن اسم کلاس های داینامیک بر اساس props به صورت زیر پیاده نکنیم:
میتونیم بجاش از روش زیر استفاده کنیم:
لینک مقاله ای که راه حل رو داخلش پیدا کردم براتون میگذارم. پر از نکته های مفیده:
https://tailwindcss.com/docs/content-configuration
امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.
اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)
موفق باشید
