Installer Tailwind CSS avec NativeWind v4 sur React Native Expo

NativeWind est compatible avec les projets Expo et React Native sans framework. Cependant, utiliser Expo facilite grandement l'intégration et la configuration.

1. Installation de NativeWind et Tailwind CSS

Commencez par installer les dépendances requises avec la commande suivante :

1npx expo install nativewind tailwindcss@^3.4.17

2. Configuration de Tailwind CSS

Initialisation de Tailwind CSS

Générez le fichier de configuration de Tailwind CSS avec la commande :

1npx tailwindcss init

Configuration du fichier tailwind.config.js

Ajoutez et modifiez le contenu suivant dans tailwind.config.js :

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: ["./app/**/*.{js,jsx,ts,tsx}"], // Mettez à jour ces chemins selon la structure de votre projet
4  presets: [require("nativewind/preset")],
5  theme: {
6    extend: {},
7  },
8  plugins: [],
9};

3. Création du fichier CSS global

Créez un fichier global.css à la racine de votre projet et ajoutez :

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

4. Ajout du preset Babel

Modifiez le fichier babel.config.js pour inclure le preset Babel de NativeWind :

1module.exports = function (api) {
2  api.cache(true);
3  return {
4    presets: [
5      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
6      "nativewind/babel",
7    ],
8  };
9};

5. Configuration de Metro pour NativeWind

Création et modification du fichier metro.config.js

Si le fichier metro.config.js n'existe pas, créez-le avec :

1npx expo customize metro.config.js

Puis ajoutez cette configuration :

1const { getDefaultConfig } = require("expo/metro-config");
2const { withNativeWind } = require('nativewind/metro');
3 
4const config = getDefaultConfig(__dirname);
5 
6module.exports = withNativeWind(config, { input: './global.css' });

6. Importation du fichier CSS global

Dans votre fichier _layout.tsx, ajoutez l'import du fichier CSS :

1import "../global.css";

7. Utilisation de Tailwind CSS dans React Native Expo

Vous pouvez maintenant utiliser les classes Tailwind CSS directement dans vos composants React Native Expo :

1<View className="flex-1 justify-center items-center">
2  <Text className="text-white text-4xl font-bold">Tuto by Codereo</Text>
3</View>

Conclusion

Vous avez maintenant un projet React Native Expo entièrement configuré avec Tailwind CSS via NativeWind v4. Profitez de la puissance des classes utilitaires pour un développement plus rapide et efficace !