حل مشکل Tailwind CSS با CSS Modules

زمانی که از فریم‌ورک قدرتمند Tailwind CSS استفاده می‌کنید نیازی ندارید که CSS بنویسید چون هر استایلی بخواهید می‌توانید با استفاده از ترکیب کلاس‌های آن ایجاد کنید. ولی گاهی پیش میاد که به دلایلی نیاز دارید از CSS Modules استفاده کنید. مثلا من یک لایبری به پروژه‌ام اضافه کردم که از CSS Modules استفاده کرده بود و من مجبور شدم پشتیبانی از CSS Modules را به کانفیگ وب‌پک خودم اضافه کنم.

مشکل اینجاست که کلاس های tailwind باید در CSS Modules به عنوان global وارد شوند.

متاسفانه دایکیومنت Tailwind CSS هیچ اشاره‌ای به CSS Modules نکرده و فرض را بر این گرفته که شما هیچ نیازی به اون نخواهید داشت. من یکمی سرچ کردم تا ببینم کسی قبلا این دو را با هم استفاده کرده یا نه که به این issue برخوردم ولی چیزی دستگیرم نشد.

خودم سعی کردم یه کانفیگی براش بنویسم و دیدم همه چیز به خوبی کار می‌کنه، با خودم گفتم اینو به اشتراک بزارم که اگه کسی این دو را همزمان می‌خواد با هم بکار ببره وقتش برای کانفیگ کردن تلف نشه.

ایده اینه که من اومدم از دو لودر مجزا برای فایل های css و scssام استفاده کردم، یکی برای css های گلوبال که بصورت .global.css نام‌گذاری میشن و یکی برای css modules ها که با پسوند های معمولی .css و .scss مشخص می‌شن.

اینم تیکه‌ی ساده شده از کانفیگ webpackام:

و اینم فایل tailwind.global.cssام: