Migrate from NativeWind or Uniwind

Nitrowind is a React Native Tailwind CSS engine for teams moving from NativeWind, Uniwind, or an older Nitrowind API. It keeps the familiar className, global.css, Metro plugin, styled components, and cssInterop workflow while using the open-source nitrocss native engine underneath.

Before migrating, read Installation, then keep this page open while you replace the styling integration. The utility classes you author still come from Tailwind v4; the key change is the native runtime and Metro setup.

From NativeWind

Replace the Babel and Metro setup with the Nitrowind Metro plugin:

- const { withNativeWind } = require("nativewind/metro");
+ const { withNitrowindMetroConfig } = require("@nitrofoundation/nitrowind/metro");

- module.exports = withNativeWind(config, { input: "./global.css" });
+ module.exports = withNitrowindMetroConfig(config, { input: "./global.css" });

Then import components and helpers from Nitrowind:

import { NitrowindProvider, View, Text, cssInterop } from '@nitrofoundation/nitrowind';

Most utility classes stay familiar because Tailwind v4 still owns utility generation. Differences to check:

• No Babel plugin is needed.
• Native engine updates are designed around Fabric, React Native 0.87, and Nitro Modules 0.37.
• Platform, safe-area, group, and animation helpers are generated by the Nitrowind pipeline.
• Unsupported web-only CSS selectors are ignored or skipped when React Native cannot represent them.

From Uniwind

The high-level Uniwind workflow is similar: import Tailwind in CSS, wrap Metro, and use className. Nitrowind exposes both Tailwind and plain-CSS entry points, and its native engine is fully open source through nitrocss.

Check these areas during a Uniwind migration:

• Replace the Uniwind Metro integration with withNitrowindMetroConfig.
• Keep your Tailwind tokens in global.css, then validate theme and dark-mode behavior with Theming.
• Move component wrappers to Nitrowind's cssInterop API where a third-party component needs a class mapping.
• Review Compatibility for web-only CSS that React Native cannot represent.

Choosing a React Native Tailwind CSS engine

NativeWind, Uniwind, and Nitrowind all make Tailwind-style utilities available to React Native developers. Choose Nitrowind when you want an open-source Tailwind v4 workflow with a native C++ engine for runtime style dependency updates, including themes, container size, safe-area insets, and group state. Verify the migration on the iOS and Android versions your app supports before removing the existing styling dependency.

Historical Nitrowind aliases

The wrapper re-exports the full nitrocss runtime and keeps aliases: