
Migrate Nativewind To Uniwind
Replace NativeWind with Uniwind on a React Native app, including Tailwind 4 upgrade, Metro/Babel cleanup, and removal of cssInterop theming.
Overview
Migrate NativeWind to Uniwind is an agent skill for the Build phase that walks through removing NativeWind, adopting Tailwind 4, and applying Uniwind’s CSS theming on React Native.
Install
npx skills add https://github.com/uni-stack/uniwind --skill migrate-nativewind-to-uniwindWhat is this skill?
- Trigger-driven migration when users mention NativeWind-to-Uniwind, upgrade, or switch
- Pre-migration audit of package.json, tailwind config, metro, babel, global.css, and NativeWind type defs
- Removes both `nativewind` and commonly missed `react-native-css-interop`
- Migrates to Tailwind CSS 4 and CSS-based Uniwind theming instead of JS `vars()` ThemeProvider
- Covers cssInterop/remapProps removal and breaking changes across the repo
- Uniwind requires Tailwind CSS 4 and CSS-based theming instead of NativeWind JS config.
- Migration explicitly removes both `nativewind` and `react-native-css-interop` packages.
Adoption & trust: 1.3k installs on skills.sh; 1.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React Native app still depends on NativeWind and react-native-css-interop, and you need a reliable path to Uniwind without subtle Metro, Babel, or theme regressions.
Who is it for?
Indie mobile developers mid-project who outgrew NativeWind friction and want a guided, repo-wide migration checklist.
Skip if: Greenfield apps that can scaffold Uniwind from scratch without legacy NativeWind config, or teams not ready to adopt Tailwind CSS 4.
When should I use this skill?
User wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration.
What do I get? / Deliverables
The project builds with Uniwind and Tailwind 4, NativeWind packages and cssInterop patterns are removed, and styling uses CSS-based themes consistent with Uniwind docs.
- Updated dependencies without NativeWind/css-interop
- Migrated Tailwind 4 and Uniwind-compatible Metro, Babel, and global CSS setup
Recommended Skills
Journey fit
How it compares
A focused migration workflow for React Native styling stacks, not a general Tailwind tutorial or web-only Tailwind upgrade guide.
Common Questions / FAQ
Who is migrate-nativewind-to-uniwind for?
Solo builders and small teams shipping React Native apps who currently use NativeWind and want to move to Uniwind with Tailwind 4.
When should I use migrate-nativewind-to-uniwind?
Use it during Build frontend work when the user asks to replace NativeWind, upgrade to Uniwind, switch styling libraries, or mentions NativeWind-to-Uniwind migration.
Is migrate-nativewind-to-uniwind safe to install?
It guides destructive dependency and config changes across your repo; review the Security Audits panel on this Prism page and commit or branch before letting an agent run uninstall and config edits.
SKILL.md
READMESKILL.md - Migrate Nativewind To Uniwind
# 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.ts` - `metro.config.js` - `babel.config.js` - `global.css` or equivalent CSS entry file - `nativewind-env.d.ts` or `nativewind.d.ts` - Any file using `cssInterop` or `remapProps` from `nativewind` - Any file importing from `react-native-css-interop` - Any ThemeProvider from NativeWind (`vars()` usage) ## Step 1: Remove NativeWind and Related Packages Uninstall ALL of these packages (if present): ```bash npm uninstall nativewind react-native-css-interop # or yarn remove nativewind react-native-css-interop # or bun remove nativewind react-native-css-interop ``` **CRITICAL**: `react-native-css-interop` is a NativeWind dependency that must be removed. It is commonly missed during migration. Search the entire codebase for any imports from it: ```bash rg "react-native-css-interop" -g "*.{ts,tsx,js,jsx}" ``` Remove every import and usage found. ## Step 2: Install Uniwind and Tailwind 4 ```bash npm install uniwind tailwindcss@latest # or yarn add uniwind tailwindcss@latest # or bun add uniwind tailwindcss@latest ``` Ensure `tailwindcss` is version 4+. ## Step 3: Update babel.config.js Remove the NativeWind babel preset: ```js // REMOVE this line from presets array: // 'nativewind/babel' ``` No Uniwind babel preset is needed. ## Step 4: Update metro.config.js Replace NativeWind's metro config with Uniwind's. `withUniwindConfig` must be the **outermost wrapper**. **Before (NativeWind):** ```js const { withNativeWind } = require('nativewind/metro'); module.exports = withNativeWind(config, { input: './global.css' }); ``` **After (Uniwind):** ```js const { getDefaultConfig } = require('expo/metro-config'); // For bare RN: const { getDefaultConfig } = require('@react-native/metro-config'); const { withUniwindConfig } = require('uniwind/metro'); const config = getDefaultConfig(__dirname); module.exports = withUniwindConfig(config, { cssEntryFile: './global.css', polyfills: { rem: 14 }, }); ``` `cssEntryFile` must be a **relative path string** from project root (e.g. `./global.css` or `./app/global.css`). Do **not** use absolute paths or `path.resolve(...)` / `path.join(...)` for this option. ```js // ❌ Broken cssEntryFile: path.resolve(__dirname, 'app', 'global.css') // ✅ Correct cssEntryFile: './app/global.css' ``` **Always set `polyfills.rem` to 14** to match NativeWind's default rem value and prevent spacing/sizing differences after migration. If the project uses custom themes beyond `light`/`dark` (e.g. defined via NativeWind's `vars()` or a custom ThemeProvider), register them with `extraThemes`. Do NOT include `light` or `dark` — they are added automatically: ```js module.exports = withUniwindConfig(config, { cssEntryFile: './global.css', polyfills: { rem: 14 }, extraThemes: ['ocean', 'sunset', 'premium'], }); ``` Options: - `cssEntryFile` (required): relative path string to CSS entry file (from project root) - `polyfills.rem` (required for migration): set to `14` to match NativeWind's rem base - `extraThemes` (required if project has custom themes): array of custom theme names — do NOT include `light`/`dark` - `dtsFile` (optional): path for generated TypeScript types, defaults to `./uniwind-types.d.ts` - `debug` (optiona