Solve Hover Issues in Tailwind CSS v4 with Next.js 16+Solve Hover Issues in Tailwind CSS v4 with Next.js 16+
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Mustafa's avatar
Mustafa Melake
• May 3
ليه الـ Hover بيفصل في Tailwind CSS v4؟ وكيف حليت اللغز! 🚀
لو شغال بـ Next.js 16 + و Tailwind CSS v4، غالباً واجهت المشكلة دي: بتكتب كود الـ Hover والـ Group Hover، الكود سليم 100%، لكن مفيش أي تأثير بيظهر على المتصفح! 🤯
إيه اللي بيحصل؟ في الإصدار الرابع، تيلويند بدأت تطبق نظام "Accessibility-First" ذكي جداً. المحرك بيفحص لو الجهاز "Touch-enabled" (زي أغلب اللابتوبات الحديثة)، فبيقرر إنه يلغي كلاسات الـ Hover عشان يوفر أداء ويمنع الـ Flickering على الموبايل. ده معناه إن حتى لو معاك ماوس، المتصفح بيعامل لابتوبك كموبايل!
الحل الجذري (بدون كتابة CSS يدوي): عشان تجبر تيلويند إنها تشغل الـ Hover والـ Group Hover دايماً، بنستخدم الـ Custom Variants الجديدة في ملف الـ globals.css:
CSS
/* الحل السحري في سطرين */
@custom-variant hover (&:hover);
@custom-variant group-hover (.group:hover &);

بالطريقة دي، إنت بتعمل Override للـ "Media Queries" الافتراضية وبترجع السلوك الطبيعي للـ Hover اللي كلنا متعودين عليه.
مهم جداً كمطورين نكون متابعين للـ "Breaking Changes" في الـ Engines اللي بنستخدمها عشان منضيعش ساعات في "Debug" لمشكلة هي في الأصل "Feature"!
شاركوني، هل واجهتوا مشاكل تانية مع Tailwind v4 لحد دلوقتي؟ 👇
Live Link: https://animated-landing-page-xi-one.vercel.app/
#Nextjs #TailwindCSS #WebDevelopment #Frontend #SoftwareEngineering #Debugging #TechTips
FramerNext.jslandingpage
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started