Uniwind Compatibility

AniUI works with both NativeWind and Uniwind. Same components, same className API — different styling engine.

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`	`withUniwind`
Tailwind preset	`nativewind/preset`	`uniwind/preset`
Babel config	`jsxImportSource: "nativewind"`	Not needed
rem base	14px	16px (web standard)
className API	Identical	Identical
Component source	Same files	Same files

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 { withUniwind } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

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

Tailwind Config#

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  presets: [require("uniwind/preset")],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
        // ... same theme tokens as NativeWind
      },
    },
  },
};

Theme tokens are identical — only the preset changes from nativewind/preset to uniwind/preset.

Example App#

A full working Uniwind example is available at examples/with-uniwind/ in the repository.

Run the example

cd examples/with-uniwind
npm install
npx expo start