اگه توی پروژه هاتون هنوز به طور سنتی استایل دهی می کنید، این متن رو بخونید!در گذشته، وقتی می خواستید به یک المان موجود توی صفحه استایل بدید، یک کلاس «مختص» اون المان ایجاد می شد و به اون کلاس استایل مورد نیاز داده می شد. بسیاری از فریم‌ورک ها هم بر همین مبنا ساخته شدند. مثلا کلاس مربوط به button، input و ... وقتی از این روش برای استایل دهی استفاده بشه با چند مشکل جدی رو به رو می شید:1. شخصی سازی: برای شخصی سازی یه کلاس مثل foo، باید یک کلاس دیگه تعریف کنید که استایل های تکمیلی رو به تگ مورد نظر بده و این سرعت توسعه رو کاهش می ده.2. تکرار استایل ها: استایل ها ممکنه با هم هم پوشانی داشته باشن و عملا مقدار زیادی استایل رو تکرار کرده باشید. این اتفاق خیلی حجم استایل ها رو زیاد می کنه. 3. اگر کد HTMLی که توش از کلاس foo استفاده کردید رو حذف کنید، هیچ راه امن و مطمئنی برای پاک کردن کلاس foo از استایل ها نیست. بعد از یه مدت با انبوهی از استایل ها مواجه می شید که هیچ جای وب اپلیکیشن ازشون استفاده نکردید! این اتفاق در گذشته حتی برای فیسبوک هم افتاد و خیلی ربطی به حرفه ای بودن یا نبودن شما نداره، چون با این روش استایل دهی تقریبا غیر قابل اجتنابه.برای پاسخ به این مشکلات، مدتیه که فریم ورک هایی ظهور کردن که به یه روش دیگه استایل دهی می کنن. استایل دهی مروبط به grid فریم‌ورک bootstrap رو به خاطر بیارید. مثلا col-sm-12 فقط و فقط داره یه کار انجام می ده. برای اسکرین های small، مقدار width رو 100٪ می کنه. چی می شد همه استایل ها همینقدر کوچک تعریف می شدن؟ اینطوری خیلی راحت تر، خواناتر و منعطف تر می شد استایل داد. این دقیقا کاریه که فریم ورک های جدید از جمله tailwindcss.com ازش استفاده می کنن. برای دیدن دمو می تونید به صفحه اول سایت tailwindcss.com مراجعه کنید.