migrate-nativewind-to-uniwind
Installation
Summary
Automated migration from NativeWind to Uniwind with Tailwind 4 upgrade and breaking-change handling.
- Removes NativeWind and
react-native-css-interoppackages, installs Uniwind and Tailwind 4, updates Metro and Babel configs - Migrates Tailwind 3 directives to Tailwind 4 imports, converts
tailwind.config.jstheme to CSS@themedirectives, deletes NativeWind type definitions - Replaces all
cssInterop()/remapProps()calls withwithUniwind()wrapper; handles third-party component styling and non-style props viaaccent-prefix - Converts NativeWind JS theme variables (
vars()) to CSS-based@variantthemes; registers custom themes in Metro config; sets up safe area utilities and theme switching - Provides deduplication utility (
cnhelper withtailwind-merge), platform selectors, CSS variable access hooks, and verification checklist for post-migration testing
SKILL.md
Migrate NativeWind to Uniwind
Uniwind replaces NativeWind with better performance and stability. It requires Tailwind CSS 4 and uses CSS-based theming instead of JS config.
Pre-Migration Checklist
Before starting, read the project's existing config files to understand the current setup:
package.json(NativeWind version, dependencies)tailwind.config.js/tailwind.config.tsmetro.config.jsbabel.config.jsglobal.cssor equivalent CSS entry filenativewind-env.d.tsornativewind.d.ts- Any file using
cssInteroporremapPropsfromnativewind - Any file importing from
react-native-css-interop - Any ThemeProvider from NativeWind (
vars()usage)
Step 1: Remove NativeWind and Related Packages
Related skills