با سلام. چند روز پیش به یک مشکل در استفاده از Tailwindcss در Nextjs برخورد کردم که بعد از ساعت ها وقت گذاشتن و بررسی بالاخره فهمیدم مشکل Tailwindcss هست. اما مشکل چی بود؟
داستان از این قراره که من داشتم یک کامپوننت ایجاد می کردم که یک دیتای ورودی با ساختار زیر دریافت می کرد:
در این کامپوننت من از گرید بندی tailwindcss استفاده کرده بودم و برای اینکه گرید بندی داینامیک باشه در آبجکت بالا یک فیلد به اسم cols تعریف کردم که بر اساس اون col-span تگ div رو مشخص می کردم.
وقتی کد رو اجرا می کردم می دیدم که کلاس css روی تگ div ست شده ولی خب style اعمال نشده بود
در عکس بالا می بینید که کلاس col-span-6 اعمال شده ولی در بخش استایل هیچ استایلی وجود نداره!!
بعد از کلی جست و جو فهمیدم که کامپایر tailwidncss نمیتونه کلاس ها رو بصورت داینامیک کامپایل کنه و این مشکل بخاطر همین مورد بود.
خب برای حل این مشکل روش های مختلفی رو امتحان کردم مثل styled-component و... ولی خب هر کدوم باعث پیچیدگی در کدم می شدن. در آخر به این نتیجه رسیدم که یک فایل css ایجاد کنم و باگ های tailwindcss رو در اون برطرف کنم. که این روش جواب داد و خیلی ساده بود. اینطوری می تونستم بدون استفاده از کتابخونه های دیگه گرید بندی رو بصورت داینامیک داشته باشم.
اما روشم چی بود؟
خب همونطور که گفتم یک فایل css ایجاد کردم و کلاس های col-span تیلویند رو بصورت زیر بازنویسی کردم
نکته: کلاس ها رو از 1 تا 12 بازنویسی کردم ولی در اینجا چون عکس خیلی بزرگ میشد تا کلاس 7 اسکرین شات گرفتم.
و در کد کامپوننت، کلاس دهی به div مورد نظر رو به اینصورت انجام دادم.
بعد از این تغییرات کدم با موفقیت کار میکرد و مشکل گرید بندی داینامیک حل شده بود.
نکته: یادتون نره بعد از اینکه فایل css شخصی خودتون رو درست کردید، در سورس تون import کنید!!
البته میتونید هم از فایل global.css برای برطرف کردن باگ های تیلویند استفاده کنید.
