expo/expo-tailwind-setup

¿Qué hace expo-tailwind-setup?

Configura Tailwind CSS v4 en Expo con react-native-css y NativeWind v5 para estilos universales.

Requisitos previos

• Proyecto Expo existente (SDK 50 o superior)
• Node.js 18+
• npm o yarn

Instalación

Ejecuta los siguientes comandos en la raíz de tu proyecto:

npm install tailwindcss @react-native-css/tailwindcss nativewind

O si usas yarn:

yarn add tailwindcss @react-native-css/tailwindcss nativewind

Configuración

1. Inicializa Tailwind CSS (crea el archivo tailwind.config.js):

npx tailwindcss init

2. Configura tailwind.config.js:

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

3. Configura Babel (en babel.config.js):

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

4. Crea un archivo CSS (por ejemplo, global.css):

@import "tailwindcss";

5. Importa el archivo CSS en tu entrada principal (ej., App.js):

import "./global.css";

Uso

Ahora puedes usar clases de Tailwind en tus componentes:

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

const StyledView = styled(View);
const StyledText = styled(Text);

export default function App() {
  return (
    <StyledView className="flex-1 items-center justify-center bg-blue-500">
      <StyledText className="text-white text-xl font-bold">
        ¡Hola, Tailwind en Expo!
      </StyledText>
    </StyledView>
  );
}

Notas importantes

• Asegúrate de que tu proyecto Expo esté actualizado.
• Si tienes problemas con la compilación, verifica las versiones de las dependencias.
• Para más detalles, consulta la documentación de NativeWind y react-native-css.

Soporte

Para errores o sugerencias, abre un issue en el repositorio correspondiente.