من CSS المتجاوب إلى Tailwind
@media (min-width: 768px) → md:. 1024px → lg:. الاستعلامات المعقدة تحتاج مراجعة.
تتوافق استعلامات min-width مع بادئات Tailwind بشكل مريح، فـ 768px تقابل md: و1024px تقابل lg:. لكن Tailwind يبني الأنماط من الشاشة الصغيرة صعودًا، ما يجعل استعلامات max-width معكوسة المنطق. أما الشروط المركبة والنطاقات فيُفضَّل إعادة كتابتها يدويًا مع اختبارها على أجهزة حقيقية.
بادئات md: وlg:
استعلامات الوسائط المتوافقة مع نقاط التوقف الافتراضية تصبح md: / lg:. النقاط النادرة تحتاج ملاحظة أو CSS.
الجوال أولًا
Tailwind يفترض قاعدة جوال ويتصاعد. اعكس ذهنيًا إن كان CSS سطح مكتب أولًا.
خاصية واحدة وبادئة واحدة
غيّر عرضًا واحدًا في كل مرة في مثال Responsive لترى أي ملاحظة تظهر.
جرّب
.example { display: flex; gap: 1rem; padding: 1rem; }ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.