Qu'est-ce que NativeWind ?
NativeWind est une bibliothèque qui vous permet d'utiliser Tailwind CSS dans les applications React Native. Au lieu d'écrire des objets React Native StyleSheet ou des styles spécifiques à la plateforme, vous appliquez des classes utilitaires de type Tailwind via la prop className. Le même modèle mental que vous utilisez pour le web - flex-1, px-4, text-center - fonctionne sur mobile, vous obtenez donc un style cohérent sur toutes les plateformes et un vocabulaire unique pour la mise en page et le design.
Sous le capot, NativeWind transforme ces noms de classes en objets de style React Native. Il s'intègre au thème Tailwind, prend en charge les modes sombre et clair, et, dans la v5, s'appuie sur une configuration basée sur CSS, y compris les variables CSS et le Tailwind moderne. Cela en fait une option solide si votre équipe connaît déjà Tailwind et veut réutiliser cette connaissance dans des applications mobiles.
Le projet est activement maintenu, avec une v5 en préversion qui aligne le projet sur Tailwind CSS v4 et ajoute des fonctionnalités comme les couleurs P3, les variables CSS et les animations CSS. De nombreuses applications de production utilisent NativeWind (le site NativeWind présente une vitrine de plus en plus riche), et l'écosystème inclut des kits UI comme NativewindUI, React Native Reusables et gluestack, construits en tenant compte de Tailwind (NativeWind).
Démarrer avec NativeWind
Le moyen le plus rapide d'essayer NativeWind est de passer par la configuration automatisée. Pour un nouveau projet React Native avec NativeWind préconfiguré, vous pouvez utiliser :
Démarrage rapide avec un nouveau projet
# New project with NativeWind (v5)
npx rn-new@next --nativewindPour un projet Expo existant, l'approche recommandée consiste à installer les paquets v5 (préversion) et à brancher Tailwind et Metro.
Installation avec Expo (v5)
Installez NativeWind et ses dépendances peer, puis Tailwind et PostCSS :
# Core dependencies
npx expo install nativewind@preview react-native-css react-native-reanimated react-native-safe-area-context
# Tailwind and tooling (dev)
npx expo install --dev tailwindcss @tailwindcss/postcss postcss
Créez un fichier postcss.config.mjs
à la racine de votre projet :
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
Ajoutez un fichier global.css (ou similaire) avec les couches NativeWind et Tailwind, puis importez-le en haut de votre composant racine (par exemple App.js). Configurez Metro avec withNativewind depuis nativewind/metro afin que le CSS soit traité correctement. Les instructions complètes pas à pas se trouvent dans le guide officiel d'installation v5.
Votre premier composant NativeWind
Une fois la configuration terminée, utilisez className
sur les composants natifs React Native :
import { View, Text } from 'react-native'
export default function WelcomeScreen() {
return (
<View className="flex-1 justify-center items-center bg-white dark:bg-gray-900 px-8 py-4">
<Text className="text-2xl font-bold text-gray-900 dark:text-white">
Welcome to your App
</Text>
<Text className="text-base text-gray-600 dark:text-gray-300 mt-2">
Styled with NativeWind
</Text>
</View>
)
}
Vous obtenez le même flux de travail utilitaire que sur le web : la mise en page (flex-1, justify-center), l'espacement (px-8, mt-2), la typographie et le mode sombre avec les variantes dark:.
NativeWind vs Tamagui
NativeWind et Tamagui améliorent tous deux le style dans React Native, mais ils partent de points différents. NativeWind est d'abord Tailwind : vous utilisez les classes et la configuration Tailwind (y compris le thème v4, les variables CSS et les utilitaires). Tamagui est un système de design et une bibliothèque de composants avec ses propres jetons, composants et compilateur d'optimisation qui produit du code idéal pour la plateforme.
Approche du style
Avec NativeWind, vous gardez le modèle mental Tailwind : className="flex-row gap-4 p-4". Avec Tamagui, vous utilisez des props de composant et des jetons de design : flexDirection="row" gap="$4"
padding="$4". Si votre équipe utilise déjà Tailwind sur le web, NativeWind réduit les changements de contexte ; si vous voulez un système de design complet et une optimisation maximale à la compilation, Tamagui est le meilleur choix.
Performance et optimisation
Le compilateur de Tamagui effectue le flattening de l'arbre, l'élimination du code mort et une sortie spécifique à la plateforme. NativeWind transforme les noms de classes en objets de style et s'appuie sur le purging de Tailwind ainsi que sur votre configuration Metro/bundler. Pour beaucoup d'applications, les deux sont assez rapides ; Tamagui possède davantage de mécanismes d'optimisation intégrés.
Quand choisir quoi
Choisissez NativeWind si vous voulez Tailwind dans React Native, si vous utilisez déjà Tailwind sur le web, ou si vous préférez une couche légère qui ne remplace pas le modèle de composants. Choisissez Tamagui si vous voulez un kit UI complet, des jetons de design et un compilateur d'optimisation, ou si vous construisez une base de code unique pour le web et le natif avec un système de composants partagé.
NativeWind v5 : mode sombre, variables CSS et animations
NativeWind v5 (préversion) aligne le projet sur Tailwind CSS v4 et ajoute des fonctionnalités importantes pour les applications modernes. Les modes sombre et clair fonctionnent avec la variante dark: afin que vous puissiez thématiser les écrans et les composants sans bibliothèque supplémentaire. Les variables CSS (et @theme) vous permettent de définir les couleurs, les polices et l'espacement en un seul endroit et de les réutiliser dans toute l'application. Les animations CSS et les transitions offrent un mouvement cohérent. La prise en charge des couleurs P3 améliore la fidélité des couleurs sur les appareils compatibles.
Comme v5 est encore en préversion, la documentation recommande de consulter la documentation v5 pour connaître la configuration la plus récente et les éventuels changements cassants. En production aujourd'hui, certaines équipes restent sur une configuration v4 stable tout en évaluant v5 en parallèle.
NativeWind : oui ou non ? Ce que la communauté évalue
Dans les discussions communautaires (y compris des fils comme NativeWind go or no go sur r/reactnative), les développeurs examinent souvent quelques points récurrents lorsqu'ils décident d'adopter ou non NativeWind.
Prêt pour la production et versioning
NativeWind v4 est utilisé en production par de nombreuses applications. v5 est explicitement en préversion et n'est pas encore recommandé pour la production ; l'API et les outils (PostCSS, Metro, Tailwind v4) évoluent encore. Une approche pratique consiste à utiliser v4 pour un travail de production stable et à essayer v5 dans des projets neufs ou non critiques jusqu'à ce qu'il soit déclaré stable.
Courbe d'apprentissage et cohérence
Si vous utilisez déjà Tailwind sur le web, NativeWind paraît familier et réduit le coût du passage entre le web et le mobile. Si votre équipe ne connaît que React Native StyleSheet ou d'autres solutions CSS-in-JS, il y a un coût d'apprentissage initial pour les classes utilitaires et les conventions de Tailwind - mais cet investissement est rentable si vous standardisez Tailwind partout.
Maintenance et écosystème
NativeWind est activement maintenu, et l'écosystème autour s'agrandit : NativewindUI, React Native Reusables et gluestack proposent des bibliothèques de composants à copier-coller ou complètes conçues pour Tailwind (NativeWind). Cela facilite la livraison rapide d'interfaces tout en restant dans l'approche utilitaire.
Quand c'est un bon choix
NativeWind est un bon « oui » si vous voulez Tailwind dans React Native, si vous valorisez un seul langage de style pour le web et le mobile, et si vous acceptez de suivre la configuration recommandée (Metro, PostCSS et, éventuellement, l'ancrage de dépendances comme lightningcss pour la stabilité). C'est un « non » ou un « attendre » si vous avez besoin immédiatement d'une v5 totalement stable, si vous préférez une bibliothèque pensée d'abord comme système de design, comme Tamagui, ou si vous voulez éviter tout outil supplémentaire de build et de CSS.
Kits de composants UI et ressources
L'écosystème NativeWind comprend plusieurs kits UI qui fonctionnent bien avec les classes de style Tailwind. NativewindUI propose des dizaines de composants et de parcours pensés pour un rendu natif. React Native Reusables vous permet de copier, coller et adapter des composants pour votre propre bibliothèque. gluestack fournit un ensemble complet de composants React et React Native construits avec Tailwind (NativeWind). Tous peuvent accélérer le développement tout en vous gardant dans le flux de travail utilitaire.
Le site NativeWind propose aussi une vitrine d'applications construites avec NativeWind - de la productivité à la santé, en passant par le social et la finance - ce qui peut vous aider à évaluer l'usage en production et les modèles de conception.
Pourquoi NativeWind compte pour React Native
React Native a toujours nécessité un modèle de style différent de celui du web. NativeWind réduit cet écart en apportant l'approche utilitaire de Tailwind et son écosystème au natif. Vous obtenez un espacement, une typographie et des couleurs cohérents entre le web et le mobile, le mode sombre et le thème avec un minimum de code, et un vocabulaire de design unique. Pour les équipes déjà investies dans Tailwind, cela peut signifier un travail de fonctionnalité plus rapide et une meilleure intégration des nouveaux arrivants.
À mesure que v5 mûrit, une meilleure compatibilité avec Tailwind v4 (y compris une configuration et des variables CSS-first) facilitera encore le partage des jetons de design et des pipelines de build entre le web et React Native. Surveiller la documentation officielle et les notes de version reste la meilleure façon de décider quand adopter v5 en production.
Commencer dès aujourd'hui
Pour essayer NativeWind, utilisez le guide d'installation v5 (Expo ou sans framework) ou le démarrage rapide npx rn-new@next --nativewind
pour un nouveau projet. Explorez la documentation pour le mode sombre, les variables CSS et les animations, et consultez NativewindUI ou React Native Reusables pour des composants prêts à l'emploi.
Visitez nativewind.dev pour la documentation complète, la vitrine et les ressources. Que vous évaluiez NativeWind pour une nouvelle application ou que vous envisagiez de l'utiliser sur un projet existant, la décision « oui ou non » dépend généralement de la familiarité de votre équipe avec Tailwind, de votre besoin des fonctionnalités de v5 et du niveau d'importance que vous accordez à un système de style unique sur le web et React Native.
