Uniwind (Recommended)

Uniwind is the recommended styling engine for AniUI — same components, same className API, but ~2–3× faster than NativeWind, Tailwind v4 CSS-first, and no Babel transform. NativeWind remains fully supported. Uniwind requires React 19, Tailwind v4, and the New Architecture (Expo SDK 55+).

Quick Start#

Initialize AniUI with the --style uniwind flag:

npx @aniui/cli init --style uniwind

The CLI auto-detects Uniwind in your dependencies and generates the correct config files. You can also select it from the interactive prompt during init.

Key Differences#

Aspect	NativeWind	Uniwind
Metro wrapper	`withNativeWind`	`withUniwindConfig`
Theme config	`tailwind.config.js` (v4) or CSS `@theme` (v5)	CSS-first `@theme` / `@variant` — no `tailwind.config.js`
Babel config	`jsxImportSource: "nativewind"`	Not needed
rem base	14px	16px (web standard)
className API	Identical	Identical
Component source	Same files	Same files

rem Unit Difference#

NativeWind uses 14px as its rem base (matching React Native's default font size), while Uniwind uses 16px (the web standard). This means components may appear ~14% larger with Uniwind. Both look great — it's a matter of preference.

Metro Config#

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withUniwindConfig } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withUniwindConfig(config, { cssEntryFile: "./global.css" });

Global CSS (CSS-first theme)#

global.css

@import "tailwindcss";
@import "uniwind";

@theme {
  --radius: 0.5rem;
}

@layer theme {
  :root {
    @variant light {
      --color-background: hsl(0 0% 100%);
      --color-foreground: hsl(240 10% 3.9%);
      --color-primary: hsl(240 5.9% 10%);
      /* ...remaining tokens */
    }
    @variant dark {
      --color-background: hsl(240 10% 3.9%);
      --color-foreground: hsl(0 0% 98%);
      --color-primary: hsl(0 0% 98%);
      /* ...remaining tokens */
    }
  }
}

Uniwind is Tailwind v4 CSS-first — there is no tailwind.config.js. Theme tokens live in @theme and @layer theme with @variant light/dark blocks. Uniwind also generates uniwind-types.d.ts automatically when Metro runs.

Example App#

A full working Uniwind example on Expo SDK 57 is available at examples/expo-57-starter/ in the repository (a second SDK 57 showcase lives at examples/with-uniwind/).

Run the example

cd examples/expo-57-starter
npm install
npx expo start

Previous← Android NextChangelog →