expo/expo-tailwind-setup

Que fait expo-tailwind-setup ?

Configurez Tailwind CSS v4 dans Expo avec react-native-css et NativeWind v5 pour un style universel.

Installation

npx expo install tailwindcss @tailwindcss/cli react-native-css
npx expo install nativewind

Configuration

1. Créez ou mettez à jour le fichier tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. Ajoutez les directives Tailwind à votre fichier CSS global (par exemple global.css) :

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Importez ce fichier CSS dans votre composant racine (par exemple App.js) :

import "./global.css";

4. Pour NativeWind v5, assurez-vous que votre babel.config.js inclut le plugin :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

5. Redémarrez votre serveur de développement Expo.

Utilisation

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-gray-100">
      <Text className="text-3xl font-bold text-blue-600">
        Hello Expo + Tailwind CSS v4
      </Text>
    </View>
  );
}

Ressources

• Documentation Tailwind CSS v4
• Documentation NativeWind
• react-native-css