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.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "expo-tailwind-setup". Set up Tailwind CSS v4 in Expo with NativeWind v5
Résultat attendu:
- 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
Utilisation de "expo-tailwind-setup". How do I use CSS variables in my components?
Résultat attendu:
- 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 }} />;
Audit de sécurité
SûrDocumentation-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.
Score de qualité
Ce que vous pouvez construire
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.
Essayez ces prompts
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.
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.
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.
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.
Bonnes pratiques
- 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
Éviter
- 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