المهارات expo-tailwind-setup
🎨

expo-tailwind-setup

آمن

Configurer Tailwind CSS v4 dans Expo

Les développeurs Expo ont des difficultés à configurer Tailwind CSS v4 pour le style multi-plateforme. Cette compétence fournit des instructions de configuration complètes pour react-native-css et NativeWind v5, permettant un style universel sur iOS, Android et le web.

يدعم: Claude Codex Code(CC)
📊 69 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "expo-tailwind-setup". Set up Tailwind CSS v4 in Expo with NativeWind v5

النتيجة المتوقعة:

  • 1. Install dependencies: npx expo install tailwindcss@^4 nativewind@5.0.0-preview.2 react-native-css@0.0.0-nightly.5ce6396 @tailwindcss/postcss tailwind-merge clsx
  • 2. Add lightningcss resolution in package.json
  • 3. Configure metro.config.js with withNativewind transformer
  • 4. Create postcss.config.mjs with @tailwindcss/postcss plugin
  • 5. Create src/global.css with Tailwind imports
  • 6. Create CSS-wrapped components using useCssElement hook

استخدام "expo-tailwind-setup". How do I use CSS variables in my components?

النتيجة المتوقعة:

  • Import the useCSSVariable hook from your tw components:
  • import { useCSSVariable } from '@/tw';
  •  
  • Use in your component:
  • const blue = useCSSVariable('--sf-blue');
  • return <View style={{ borderColor: blue }} />;

التدقيق الأمني

آمن
v2 • 1/23/2026

Documentation-only skill containing setup instructions for Tailwind CSS v4 in Expo. All 65 static findings are false positives: backticks are markdown code blocks, URL is example image, environment access is platform detection. No executable code or credential access.

1
الملفات التي تم فحصها
481
الأسطر التي تم تحليلها
0
النتائج
2
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
20
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Configuration d'un nouveau projet Expo

Ajouter Tailwind CSS v4 à un nouveau projet Expo en utilisant NativeWind v5 et react-native-css pour le style multi-plateforme.

Style spécifique à la plateforme

Implémenter des polices et couleurs spécifiques à la plateforme en utilisant des requêtes média CSS et des variables CSS pour iOS, Android et le web.

Migration depuis NativeWind v4

Comprendre les différences clés entre NativeWind v4 et v5, y compris la suppression de la configuration babel et la nouvelle configuration CSS-first.

جرّب هذه الموجهات

Configuration de base 
Configure Tailwind CSS v4 dans mon projet Expo en utilisant react-native-css et NativeWind v5. Inclut les étapes d'installation et les fichiers de configuration.
Configuration complète 
Configure mon application Expo avec Tailwind CSS v4 : configure Metro, PostCSS, le fichier CSS global, et les composants View, Text, Pressable et Image enveloppés en CSS.
Styles par plateforme 
Ajoute un style spécifique à la plateforme dans mon application Expo. Crée des variables CSS pour les couleurs système iOS et les couleurs de plateforme Android avec fallback light-dark pour le web.
Thème personnalisé 
Défini des variables de thème personnalisées dans mon fichier global.css pour les polices et couleurs personnalisées. Montre comment utiliser les variables CSS dans les composants JavaScript avec le hook useCSSVariable.

أفضل الممارسات

  • Définis inlineVariables: false dans la configuration Metro pour éviter de casser PlatformColor dans les variables CSS
  • Utilise les requêtes média de plateforme (@media ios/android) pour la police et la couleur spécifiques à la plateforme
  • Enveloppe les composants React Native avec useCssElement pour activer le support de className

تجنب

  • Ne crée pas babel.config.js avec les presets NativeWind pour Tailwind v4 - la configuration est CSS-first maintenant
  • N'utilise pas autoprefixer - lightningcss dans Expo gère automatiquement les préfixes fournisseur
  • Ne saute pas la création de composants enveloppés en CSS - className ne fonctionnera pas sans useCssElement

الأسئلة المتكررة

Quelles versions d'Expo et React Native sont prises en charge ?
Cette configuration fonctionne avec Expo SDK 52+ et React Native 0.76+. La compétence utilise NativeWind v5 qui nécessite la nouvelle architecture de transformateur Metro.
Dois-je configurer tailwind.config.js ?
Non. Tailwind v4 utilise la configuration CSS-first. Définis tes variables de thème directement dans global.css utilisant des blocs @theme au lieu de tailwind.config.js.
Comment gérer les différentes polices sur iOS et Android ?
Utilise les requêtes média CSS @media pour définir des variables de police spécifiques à la plateforme. iOS utilise les polices système tandis qu'Android utilise les polices de fallback normales.
Puis-je utiliser les classes utilitaires Tailwind directement sur les composants ?
Non. Tu dois utiliser des composants enveloppés en CSS (View, Text, Pressable) qui utilisent le hook useCssElement. Les composants React Native standard ne supportent pas className.
Comment déboguer les styles qui ne s'appliquent pas ?
Vérifie trois choses : global.css est importé dans le point d'entrée de ton app, les composants sont enveloppés avec useCssElement, et la configuration Metro a withNativewind appliqué.
Quelle est la différence entre react-native-css et NativeWind ?
react-native-css fournit l'analyseur d'exécution CSS, tandis que NativeWind v5 fournit le transformateur Metro qui permet le traitement Tailwind dans le pipeline de build.

تفاصيل المطور

المؤلف

expo

الترخيص

MIT

المستودع

https://github.com/expo/skills/tree/main/plugins/expo-app-design/skills/expo-tailwind-setup/

مرجع

main

بنية الملفات

📄 SKILL.md