الـhover والـvariables في tailwind بعد اخر تحديث

كما ذكرت من ضمن هذه التغييرات هي ازالة تأثير الـhover من الشاشات الصغيرة او المعتمدة على اللمس وسبب الازالة يعود لوجهة نظر القائمين على الـframework ان هذا التأثير يسبب تجربة سيئة للمستخدمين بسبب ان الـhover في الهواتف يبقى موجود حتى تضغط في مكان آخر رغم ان وجهة النظر هذه قد لا تكون صحيحة 100% لأن تأثير الـhover ليس متوقف على تغيير لون او ما شابه وانما يستخدم في تأثيرات متنوعة مثل عرض بعض القوائم بشكل بسيط دون الحاجة لاستخدام javascript مثلا.

ولحل هذا الامر يتم اضافة هذا الجزء في ملف الـinput.css/globals.css

@custom-variant hover (&:hover);

تم اضافة @theme المسؤولة عن ادارة المتغيرات بعد ما تم الاستغناء عن ملف tailwind.config.js ولكن المختلف فيها انها تقوم بتخزين قيمة المتغيرات عند عملية الـbuild مما يمنعك من تغيير قيمة المتغيرات فيما بعد من خلال ملف الـcss (مثلا لو حاولت تعمل dark mode أو تغييرات ديناميكية، ما رح تنعكس).

لحل هذا الامر يتم الاستعانة بقيمة inline التي تقوم بربط قيم @theme مع متغيرات CSS Variables بشكل مباشر، وبالتالي تقدر تغير القيم ديناميكيًا حتى بعد الـbuild.

:root {
  --primary-color: white;
}
.dark {
  --primary-color: black;
}
@theme inline {
  --color-primary: var(--primary-color);
}

معرض اعمالي (https: //yazn-108.github.io) في اخر تحديث له قائم على هذا الامر من ناحية الـhover والـdark-mode