uni-stack/migrate-nativewind-to-uniwind

O que migrate-nativewind-to-uniwind faz?

Migrar um projeto React Native de NativeWind para Uniwind. Use quando o usuário deseja substituir NativeWind por Uniwind, atualizar do NativeWind, migrar para Uniwind ou mencionar migração de NativeWind para Uniwind. Lida com remoção de pacotes, migração de configuração, atualização para Tailwind 4, remoção de cssInterop, conversão de tema e todas as mudanças significativas.

Pré-requisitos

• Node.js (v16 ou superior)
• Projeto React Native existente (Expo ou CLI)
• NativeWind instalado e configurado

Etapas da Migração

1. Remover pacotes NativeWind

   npm uninstall nativewind
   # ou
   yarn remove nativewind
   

2. Instalar Uniwind

   npm install uniwind
   # ou
   yarn add uniwind
   

3. Atualizar configuração do PostCSS (arquivo postcss.config.js)

   module.exports = {
     plugins: {
       "@tailwindcss/postcss": {},
     },
   };
   

4. Migrar configuração do Babel (arquivo babel.config.js)

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

5. Atualizar tema do Tailwind (arquivo tailwind.config.js)

   const { theme } = require("uniwind/theme");
   module.exports = {
     content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
     theme: { extend: { ...theme } },
     plugins: [],
   };
   

6. Remover cssInterop (arquivo metro.config.js ou app.json)

   // Remover:
   // cssInterop: true
   

7. Verificar se há arquivos de legado (opcional)

   npx uniwind check
   

Mudanças Significativas

• Remoção do plugin Babel: nativewind/babel → uniwind/babel
• Tema Base: theme() agora usa uniwind/theme
• cssInterop: Removido completamente
• Variantes: dark: e outras variantes podem precisar ser reconfiguradas

Suporte

• Expo SDK 50+
• React Native >= 0.73
• Tailwind CSS 4+

Referências

• Documentação do Uniwind
• Guia de Migração do NativeWind