Intégrer Tailwind CSS à React Native avec NativeWind

Si vous avez développé des applications web avec Tailwind CSS, passer à l’API StyleSheet de React Native donne l’impression de faire un pas en arrière. Vous perdez le workflow utility-first, les noms de classes familiers et la rapidité. NativeWind comble cette lacune en apportant le styling façon Tailwind à React Native — sans nécessiter de navigateur ni de moteur CSS.

Cet article explique comment fonctionne NativeWind, ce que vous offre la version stable actuelle, et où se situent les véritables limites.

Ce que fait réellement NativeWind

React Native n’a pas de moteur CSS. Chaque style doit être un objet JavaScript passé à une prop style. NativeWind se situe entre votre code et cette exigence : vous écrivez des chaînes className en utilisant la syntaxe Tailwind, et NativeWind compile et applique ces styles pour React Native — en combinant un traitement au moment de la compilation avec une couche d’exécution légère pour le styling conditionnel.

Le résultat ressemble à ceci :

<View className="flex-1 items-center justify-center bg-blue-500">
  <Text className="text-white text-lg font-bold">Hello</Text>
</View>

Il ne s’agit pas de Tailwind CSS s’exécutant nativement. C’est NativeWind qui interprète le vocabulaire de classes de Tailwind et le mappe vers des styles que React Native comprend. Cette distinction est importante lorsque vous atteignez les limites.

NativeWind v4 : la voie stable pour la production

Début 2026, NativeWind v4 est la version prête pour la production. Elle cible Tailwind CSS v3 — et non v4. Une préversion v5 existe et s’aligne sur Tailwind v4, mais ce n’est pas encore la voie par défaut. Si vous démarrez un nouveau projet, utilisez NativeWind v4 avec tailwindcss@^3.4.

NativeWind v4 a introduit une architecture plus prévisible construite autour d’une transformation jsxImportSource tout en s’intégrant toujours avec Babel. En pratique, cela signifie :

• La prop className est préservée sur les composants, non supprimée au moment de la compilation
• Vous pouvez utiliser des utilitaires comme clsx ou cn directement avec className
• La configuration est plus cohérente avec Metro et d’autres outils

NativeWind v4 a également introduit son propre import StyleSheet, qui étend la version intégrée de React Native. Il gère proprement la fusion des props style et className — quelque chose avec lequel le StyleSheet par défaut a du mal pour les transformations et les ombres.

Configuration de NativeWind avec Expo

Expo est l’environnement le plus courant pour NativeWind, et il offre l’expérience de configuration la plus fluide. Les étapes principales sont :

1. Installer nativewind, react-native-reanimated, react-native-safe-area-context et tailwindcss@^3.4 comme dépendances
2. Exécuter npx tailwindcss init et ajouter nativewind/preset à votre configuration Tailwind
3. Créer un fichier global.css avec les directives Tailwind standard (@tailwind base;, @tailwind components;, @tailwind utilities;) et l’importer dans le point d’entrée de votre application
4. Configurer babel.config.js avec jsxImportSource: "nativewind" et inclure le plugin Babel NativeWind
5. Envelopper votre configuration Metro avec withNativeWind

Pour les projets TypeScript, ajoutez un fichier nativewind-env.d.ts avec /// <reference types="nativewind/types" /> pour obtenir un support approprié de la prop className sur les composants natifs.

Si vous souhaitez éviter complètement la configuration, npx rn-new --nativewind génère un projet Expo minimal avec NativeWind déjà configuré.

Mode sombre, variantes et limitations réelles

NativeWind v4 prend en charge la variante dark: via un hook useColorScheme qui retourne colorScheme, setColorScheme et toggleColorScheme. Vous appliquez les styles en mode sombre exactement comme vous le feriez sur le web :

<Text className="text-gray-900 dark:text-white">Label</Text>

Les variantes de groupe fonctionnent également — un Pressable avec className="group" peut piloter les styles des enfants via group-active: ou group-hover:.

Là où cela diverge du Tailwind web :

• Les breakpoints ne se mappent pas proprement aux écrans mobiles. Les préfixes sm:, md:, lg: de Tailwind sont conçus pour les largeurs de viewport, pas pour les facteurs de forme des appareils. Pour des layouts mobiles responsives, vous utiliserez souvent l’API Dimensions de React Native ou le hook useWindowDimensions à la place.
• Certaines props de style nécessitent des API alternatives. Par exemple, le styling spécifique aux listes comme columnWrapperStyle peut toujours être géré en dehors de className, selon le composant.
• Les ombres se comportent différemment en natif. React Native utilise des propriétés d’ombre spécifiques à la plateforme (shadowColor, shadowOffset, shadowOpacity, shadowRadius sur iOS et elevation sur Android), donc le résultat n’est pas équivalent au box-shadow CSS.
• Les animations via les classes utilitaires sont expérimentales et incohérentes entre iOS et Android. Pour tout ce qui est complexe, utilisez directement React Native Reanimated.

Conclusion

NativeWind est une couche de traduction, pas un runtime CSS. Il vous donne le vocabulaire et le workflow de Tailwind dans un contexte React Native, ce qui est véritablement utile — en particulier pour les équipes déjà familières avec Tailwind. Mais il n’efface pas la frontière de la plateforme. Vous écrirez toujours des props style occasionnelles, contournerez des contraintes spécifiques au natif et penserez selon le modèle de layout de React Native.

Pour la plupart des développeurs familiers avec Tailwind, ce compromis en vaut la peine. Le gain de productivité du styling utility-first dans React Native est réel, et NativeWind v4 est suffisamment stable pour être déployé en production.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.