yazn_108 image

يزن احمد(@yazn_108)مطور مواقع فرونت اند

لا تتصل بنا بل تواصل معي

لا حاجة للتكلف في صياغة الرسالة كل ما تحب ان اساعدك فيه، اخبرني عنه. اذا عندك اي شيء تحب تخبرني عنه فانا جاهز لمساعدتك والهدف من المنصة هو البساطة وتجنب التكلفات والرسميات التي اعتدنا عليها في المواقع حتى اصبحت جميع المواقع لها نمط واحد وان تنوعت في الافكار والاشكال.اهلا وسهلا ومرحبا بك

اشترك في النشرة البريدية

ما راح أزعجك برسائل كثيرة، كل القصة إنك تحط بريدك عشان يوصلك تنبيه أول ما أنشر مقالات جديدة. بسيطة وسهلة 👌 أهلاً بك.

هدف المنصة/من انا؟شروط الاستخدام

© جميع الحقوق محفوظة لـyazn_108

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

بعد اخر تحديث في tailwind 4.1.0v تم القيام بعدة تغييرات ومن ضمن هذه التغييرات هي ازالة تأثير الـhover من الشاشات الصغيرة او المعتمدة على اللمس وايضا تم تغيير الية ادارة المتغيرات

  1. مستجدات الـhover
  2. تغييرات الـvariables
  3. تجربة نتيجة الحلول المذكورة
  4. اشترك في النشرة البريدية

مستجدات الـhover

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

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

css

@custom-variant hover (&:hover);

تغييرات الـvariables

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

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

css

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

تجربة نتيجة الحلول المذكورة

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