ما هي مكتبة NativeWind وكيف تمكن المطورين من استخدام Tailwind CSS داخل React Native؟

الإجابة المختصرة

هي مكتبة تقوم بترجمة فئات Tailwind CSS إلى كائنات StyleSheet متوافقة مع React Native في وقت التجميع (Build-time)، مما يتيح كتابة فئات className قياسية فائقة السرعة والأناقة.

الشرح

تسمح NativeWind بمشاركة نفس منظومة تصميم Tailwind بين مواقع الويب وتطبيقات الهاتف. الإصدار الرابع (v4) مبني على Tailwind CSS v3 ويعمل عبر إضافة Babel مع Metro بالإضافة إلى طبقة runtime خفيفة (react-native-css-interop)، بينما يستهدف الإصدار الخامس Tailwind v4. يحول ذلك الفئات مثل className="flex-1 bg-slate-900 p-4 rounded-xl" إلى كائنات تنسيق محسنة مع تكلفة runtime صغيرة لمعالجة الحالات الديناميكية (مثل dark: و hover: و breakpoints).

مثال بالكود

// كتابة فئات Tailwind المألوفة في React Native بواسطة NativeWind
import { View, Text } from 'react-native';

export function UserCard({ name }: { name: string }) {
  return (
    <View className="p-4 bg-white dark:bg-zinc-800 rounded-2xl shadow-md flex-row items-center space-x-3">
      <Text className="text-lg font-bold text-gray-900 dark:text-white">{name}</Text>
    </View>
  );
}

أخطاء شائعة

• محاولة استخدام فئات CSS غير المدعومة في محرك Yoga كـ grid و subgrid دون الاستعانة بالبدائل المتوافقة.

أسئلة متابعة

• كيف تدير الوضع الليلي والنهاري (Dark & Light Mode) بسلاسة بالاعتماد على useColorScheme؟
• ما هي الفروقات الرئيسية بين CSS على المتصفح ونظام التنسيق في React Native؟

المصادر

• NativeWind docs — Introduction
• React Native docs — Style