NativeWind から Uniwind への移行

Uniwind は NativeWind をより優れたパフォーマンスと安定性で置き換えます。Tailwind CSS 4 が必要で、JS config の代わりに CSS ベースのテーマを使用します。

移行前チェックリスト

開始する前に、プロジェクトの既存 config ファイルを読んで、現在のセットアップを理解してください:

• package.json (NativeWind バージョン、依存関係)
• tailwind.config.js / tailwind.config.ts
• metro.config.js
• babel.config.js
• global.css またはそれに相当する CSS エントリファイル
• nativewind-env.d.ts または nativewind.d.ts
• nativewind から cssInterop または remapProps を使用しているファイル
• react-native-css-interop からインポートしているファイル
• NativeWind の ThemeProvider (vars() の使用)

ステップ 1: NativeWind と関連パッケージを削除

これらのパッケージをすべて (存在する場合) アンインストール:

npm uninstall nativewind react-native-css-interop
# または
yarn remove nativewind react-native-css-interop
# または
bun remove nativewind react-native-css-interop

重要: react-native-css-interop は NativeWind の依存関係で、削除する必要があります。移行中に見落とされやすいものです。コードベース全体で、そこからのインポートを検索してください:

rg "react-native-css-interop" -g "*.{ts,tsx,js,jsx}"

見つかったすべてのインポートと使用方法を削除します。

ステップ 2: Uniwind と Tailwind 4 をインストール

npm install uniwind tailwindcss@latest
# または
yarn add uniwind tailwindcss@latest
# または
bun add uniwind tailwindcss@latest

tailwindcss がバージョン 4 以上であることを確認してください。

ステップ 3: babel.config.js を更新

NativeWind の babel preset を削除:

// presets 配列からこの行を削除:
// 'nativewind/babel'

Uniwind の babel preset は必要ありません。

ステップ 4: metro.config.js を更新

NativeWind の metro config を Uniwind のものに置き換えます。withUniwindConfig は 最も外側のラッパー である必要があります。

Before (NativeWind):

const { withNativeWind } = require('nativewind/metro');
module.exports = withNativeWind(config, { input: './global.css' });

After (Uniwind):

const { getDefaultConfig } = require('expo/metro-config');
// ベア 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 はプロジェクトルートから 相対パス文字列 である必要があります (例: ./global.css または ./app/global.css)。 このオプションに絶対パスまたは path.resolve(...) / path.join(...) を使用しない でください。

// ❌ 壊れている
cssEntryFile: path.resolve(__dirname, 'app', 'global.css')

// ✅ 正しい
cssEntryFile: './app/global.css'

常に polyfills.rem を 14 に設定 して、NativeWind のデフォルトの rem 値と一致させ、移行後の間隔/サイズの違いを防いでください。

プロジェクトが light/dark を超えるカスタムテーマを使用する場合 (例: NativeWind の vars() またはカスタム ThemeProvider 経由で定義されている場合)、extraThemes で登録してください。light や dark を含めないでください — これらは自動的に追加されます:

module.exports = withUniwindConfig(config, {
  cssEntryFile: './global.css',
  polyfills: { rem: 14 },
  extraThemes: ['ocean', 'sunset', 'premium'],
});

オプション:

• cssEntryFile (必須): CSS エントリファイルへの相対パス文字列 (プロジェクトルートから)
• polyfills.rem (移行に必須): 14 に設定して NativeWind の rem ベースと一致させる
• extraThemes (プロジェクトがカスタムテーマを持つ場合は必須): カスタムテーム名の配列 — light/dark を含めないこと
• dtsFile (オプション): 生成された TypeScript 型のパス、デフォルトは ./uniwind-types.d.ts
• debug (オプション): 開発中にサポートされていない CSS プロパティをログ出力

ステップ 5: global.css を更新

NativeWind の Tailwind 3 ディレクティブを Tailwind 4 インポートに置き換えます:

Before:

@tailwind base;
@tailwind components;
@tailwind utilities;

After:

@import 'tailwindcss';
@import 'uniwind';

ステップ 6: CSS エントリインポートを更新

global.css をメイン App コンポーネント (例: App.tsx) にインポートされていることを確認してください。アプリを登録するルート index.ts/index.js にインポートしないでください — そこにインポートするとホットリロードが壊れます。

ステップ 7: NativeWind 型定義を削除

nativewind-env.d.ts または nativewind.d.ts を削除します。Uniwind は dtsFile で指定されたパスで独自の型を自動生成します。

ステップ 8: tailwind.config.js を削除

tailwind.config.js / tailwind.config.ts を完全に削除します。すべてのテーマ config は Tailwind 4 の @theme ディレクティブを使用して CSS に移動します。

カスタムテーム値を global.css に移行します:

Before (tailwind.config.js):

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#00a8ff',
        secondary: '#273c75',
      },
      fontFamily: {
        normal: ['Roboto-Regular'],
        bold: ['Roboto-Bold'],
      },
    },
  },
};

After (global.css):

@import 'tailwindcss';
@import 'uniwind';

@theme {
  --color-primary: #00a8ff;
  --color-secondary: #273c75;
  --font-normal: 'Roboto-Regular';
  --font-bold: 'Roboto-Bold';
}

フォントファミリーは 単一のフォント を指定する必要があります — React Native はフォントフォールバックをサポートしていません。

ステップ 9: すべての cssInterop と remapProps の使用を削除

これが最も見落とされやすいステップです。 コードベース全体を検索してください:

rg "cssInterop|remapProps" -g "*.{ts,tsx,js,jsx}"

すべての cssInterop() / remapProps() 呼び出しを Uniwind の withUniwind() に置き換えます:

Before (NativeWind):

import { cssInterop } from 'react-native-css-interop';
import { Image } from 'expo-image';

cssInterop(Image, { className: 'style' });

After (Uniwind):

import { withUniwind } from 'uniwind';
import { Image as ExpoImage } from 'expo-image';

export const Image = withUniwind(ExpoImage);

withUniwind は className → style などの一般的なプロパティを自動的にマッピングします。カスタムプロップマッピングの場合:

const StyledProgressBar = withUniwind(ProgressBar, {
  width: {
    fromClassName: 'widthClassName',
    styleProperty: 'width',
  },
});

ラップされたコンポーネントを モジュールレベル で定義します (render 関数の内部ではなく)。各コンポーネントは 1 回だけラップされるべきです:

• 1 ファイルでのみ使用される — 同じファイルでラップされたコンポーネントを定義します:

  // screens/ProfileScreen.tsx
  import { withUniwind } from 'uniwind';
  import { BlurView as RNBlurView } from '@react-native-community/blur';
  
  const BlurView = withUniwind(RNBlurView);
  
  export function ProfileScreen() {
    return <BlurView className="flex-1" />;
  }
  

• 複数ファイルで使用される — 共有モジュールで一度ラップして再エクスポートします:

  // components/styled.ts
  import { withUniwind } from 'uniwind';
  import { Image as ExpoImage } from 'expo-image';
  import { LinearGradient as RNLinearGradient } from 'expo-linear-gradient';
  
  export const Image = withUniwind(ExpoImage);
  export const LinearGradient = withUniwind(RNLinearGradient);
  

  その後、共有モジュールからすべての場所にインポートします:

  import { Image, LinearGradient } from '@/components/styled';
  

同じコンポーネントを複数のファイルで withUniwind を呼び出さないでください — 一度ラップして、すべての場所にインポートします。

重要: react-native または react-native-reanimated からのコンポーネントを withUniwind でラップ しないでください — これらはすでに className をサポートしています。これには View、Text、Image、ScrollView、FlatList、Pressable、TextInput、Animated.View などが含まれます。withUniwind は サードパーティ コンポーネント (例: expo-image、expo-linear-gradient、@react-native-community/blur) にのみ使用してください。

重要 — スタイルプロパティではないカラープロップの accent- プレフィックス: React Native コンポーネントには color、tintColor、backgroundColor などの style オブジェクトに含まれる ない プロパティがあります。これらを Tailwind クラスで設定するには、対応する *ClassName プロップで accent- プレフィックスを使用してください:

// color prop → colorClassName with accent- prefix
<ActivityIndicator
    className="m-4"
    size="large"
    colorClassName="accent-blue-500 dark:accent-blue-400"
/>

// Button の color prop
<Button
    colorClassName="accent-background"
    title="Press me"
/>

// tintColor prop → tintColorClassName with accent- prefix
<Image
    className="w-6 h-6"
    tintColorClassName="accent-red-500"
    source={icon}
/>

ルール: className はスタイルベースのプロップに任意の Tailwind ユーティリティを受け入れます。非スタイルプロップ (color、tintColor など) の場合、accent- プレフィックス付きで {propName}ClassName を使用します。これはすべてのビルトイン React Native コンポーネントに適用されます。

ステップ 10: NativeWind テーマ変数を移行

Before (NativeWind JS themes with vars()):

import { vars } from 'nativewind';

export const themes = {
  light: vars({
    '--color-primary': '#00a8ff',
    '--color-typography': '#000',
  }),
  dark: vars({
    '--color-primary': '#273c75',
    '--color-typography': '#fff',
  }),
};

// JSX では:
<View style={themes[colorScheme]}>

After (Uniwind CSS themes):

@layer theme {
  :root {
    @variant light {
      --color-primary: #00a8ff;
      --color-typography: #000;
    }
    @variant dark {
      --color-primary: #273c75;
      --color-typography: #fff;
    }
  }
}

重要: すべてのテーマバリアントは、まったく同じセットの CSS 変数を定義する必要があります。light が --color-primary と --color-typography を定義する場合、dark (およびカスタムテーマ) も両方を定義する必要があります。変数が一致しないと、Uniwind のランタイムエラーが発生します。

ThemeProvider ラッパーは必要ありません。NativeWind の <ThemeProvider> または vars() ラッパーを JSX から削除します。React Navigation の <ThemeProvider> を使用している場合は保持してください。

プロジェクトが、テーマをプレビューしたり、特定のサブツリーに対してテーマを強制したり (例: デモカード、設定プレビュー、またはサイドバイサイドのテーム比較)、ネストされたテーマラッパーを使用していた場合、グローバルテーマを変更する代わりに Uniwind Pro の ScopedTheme を使用します:

import { ScopedTheme } from 'uniwind';

<ScopedTheme theme="dark">
  <PreviewCard />
</ScopedTheme>

プロジェクトが light/dark を超えるカスタムテーマ を持つ場合 (例: ocean、premium)、以下を行う必要があります:

1. CSS で @variant を使用して定義します:

@layer theme {
  :root {
    @variant ocean {
      --color-primary: #0ea5e9;
      --color-background: #0c4a6e;
    }
  }
}

2. metro.config.js で extraThemes を経由して登録します (light/dark をスキップ — 自動追加されます):

module.exports = withUniwindConfig(config, {
  cssEntryFile: './global.css',
  polyfills: { rem: 14 },
  extraThemes: ['ocean', 'premium'],
});

ステップ 11: Safe Area ユーティリティを移行

NativeWind の safe area クラスは Uniwind で明示的なセットアップが必要です:

import { SafeAreaProvider, SafeAreaListener } from 'react-native-safe-area-context';
import { Uniwind } from 'uniwind';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaListener
        onChange={({ insets }) => {
          Uniwind.updateInsets(insets);
        }}
      >
        <View className="pt-safe px-safe">
          {/* content */}
        </View>
      </SafeAreaListener>
    </SafeAreaProvider>
  );
}

ステップ 12: rem 値を確認

NativeWind はベース rem として 14px を使用し、Uniwind はデフォルトで 16px です。ステップ 4 で既に metro config に polyfills: { rem: 14 } を設定して、NativeWind の間隔を保持しています。ユーザーが明示的に Uniwind のデフォルト (16px) を希望する場合、ポリフィルを削除できます — ただし、すべての間隔/サイズがシフトすることを警告してください。

ステップ 13: className の重複排除を処理

Uniwind は競合する classNames を自動的に重複排除しません (NativeWind はしていました)。コードベースが className={`p-4 ${overrideClass}`} のようなオーバーライドパターンに依存している場合、cn ユーティリティを設定してください。

まず、プロジェクトに既に cn ヘルパーがあるかどうかを確認してください (shadcn/ui プロジェクトで一般的):

rg "export function cn|export const cn" -g "*.{ts,tsx,js}"

存在する場合、そのまま保持します。存在しない場合は、依存関係をインストールして作成します:

npm install tailwind-merge clsx

lib/cn.ts (またはプロジェクトで utils が存在する場所) を作成:

import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

使用方法:

import { cn } from '@/lib/cn';

<View className={cn('p-4 bg-white', props.className)} />
<Text className={cn('text-base', isActive && 'text-blue-500', disabled && 'opacity-50')} />

生の twMerge の代わりに cn を使用してください — clsx を使用して条件付きクラス、配列、および falsy 値を処理してから、tailwind-merge で重複排除します。

重要なユーティリティも Uniwind でサポートされています。移行された NativeWind コードが Tailwind の important モディファイアを意図的に強制的にオーバーライドしている場合、それを保持してください:

<View className="bg-blue-500 !bg-red-500" />
<Pressable className="bg-blue-500 active:!bg-red-500" />

important ユーティリティは、同じスタイルプロパティに対して非重要なユーティリティをオーバーライドします。インライン style は、重要な className ユーティリティよりも優先度が最も高いです。

ステップ 14: アニメーション化されたクラス名を更新

プロジェクトが NativeWind animated-* / transition クラスパターンを使用していた場合、それらを明示的な react-native-reanimated の使用に移行します。Uniwind OSS は NativeWind スタイルのアニメーション化されたクラス動作を提供しません。

このミグレーションガイドセクションを真実のソースとして使用してください:

• https://docs.uniwind.dev/migration-from-nativewind

ステップ 15: 残りの NativeWind 参照をクリーンアップ

最終スイープ — 残りの参照を検索して削除:

rg "nativewind|NativeWind|native-wind" -g "*.{ts,tsx,js,jsx,json,css}"

以下を確認:

• すべてのファイルの NativeWind インポート
• package.json の nativewind (devDependencies も)
• package.json の react-native-css-interop
• babel.config.js の NativeWind babel preset
• metro.config.js の NativeWind metro ラッパー
• nativewind-env.d.ts または nativewind.d.ts ファイル
• すべての cssInterop() または remapProps() 呼び出し
• nativewind からの vars() インポート

Uniwind API とパターン

useUniwind — テーマアクセス (変更時に再レンダリング)

ドキュメント: https://docs.uniwind.dev/api/use-uniwind

import { useUniwind } from 'uniwind';

const { theme, hasAdaptiveThemes } = useUniwind();
// theme: 現在のテーム名 — "light"、"dark"、"system"、またはカスタム
// hasAdaptiveThemes: アプリがシステムカラースキームに従う場合は true

用途: UI でテーム名を表示する、テーム別の条件付きレンダリング、テーム変更時の副作用。

Uniwind 静的 API — テーマアクセス (再レンダリングなし)

再レンダリングを引き起こさずにテーム情報にアクセス:

import { Uniwind } from 'uniwind';

Uniwind.currentTheme    // "light"、"dark"、"system"、またはカスタム
Uniwind.hasAdaptiveThemes // シスムをフォローしている場合は true

用途: ロギング、分析、render 外の命令型ロジック。

useResolveClassNames — classNames をスタイルオブジェクトに変換

ドキュメント: https://docs.uniwind.dev/api/use-resolve-class-names

Tailwind クラスを React Native スタイルオブジェクトに変換します。className をサポートせず、withUniwind でラップできないコンポーネント (例: react-navigation テーマ config) で使用します:

import { useResolveClassNames } from 'uniwind';

const headerStyle = useResolveClassNames('bg-blue-500');
const cardStyle = useResolveClassNames('bg-white dark:bg-gray-900');

<Stack.Navigator
  screenOptions={{
    headerStyle: headerStyle,
    cardStyle: cardStyle,
  }}
/>

useCSSVariable — JS で CSS 変数にアクセス

ドキュメント: https://docs.uniwind.dev/api/use-css-variable

CSS 変数値をプログラムで取得します。変数には -- プレフィックスが必要で、global.css で定義されている変数と一致する必要があります:

import { useCSSVariable } from 'uniwind';

const primaryColor = useCSSVariable('--color-primary');
const spacing = useCSSVariable('--spacing-4');

用途: アニメーション、サードパーティライブラリ config、デザイントークンを使用した計算。

CSS 関数 — カスタムユーティリティ

ドキュメント: https://docs.uniwind.dev/api/css-functions

hairlineWidth()、fontScale()、pixelRatio() などのデバイス対応 CSS 関数を使用してカスタムユーティリティを定義します。これらはすべての場所で使用できます (カスタム CSS クラス、@utility など) — ただし @theme {} 内では 使用できません (静的値のみを受け入れます)。@utility を使用して再利用可能な Tailwind スタイルのクラスを作成します:

@utility w-hairline { width: hairlineWidth(); }
@utility h-hairline { height: hairlineWidth(); }
@utility border-hairline { border-width: hairlineWidth(); }
@utility text-scaled { font-size: fontScale(); }

その後、次のように使用します: <View className="w-hairline h-hairline" />

プラットフォームセレクタ

ドキュメント: https://docs.uniwind.dev/api/platform-select

ios:、android:、web:、native: プレフィックスを使用して、プラットフォームごとに条件付きでスタイルを適用します:

<View className="ios:bg-red-500 android:bg-blue-500 web:bg-green-500">
  <Text className="ios:text-white android:text-white web:text-black">
    プラットフォーム固有のスタイル
  </Text>
</View>

テーマ切り替え

ドキュメント: https://docs.uniwind.dev/theming/basics

デフォルトでは Uniwind はシステムカラースキームに従います (アダプティブテーム)。プログラム的にテーマを切り替えるには:

import { Uniwind } from 'uniwind';

Uniwind.setTheme('dark');     // dark を強制
Uniwind.setTheme('light');    // light を強制
Uniwind.setTheme('system');   // システムに従う (デフォルト)
Uniwind.setTheme('ocean');    // カスタムテーマ (extraThemes に含まれている必要があります)

ScopedTheme — サブツリーのテーマのみ

ドキュメント: https://docs.uniwind.dev/api/scoped-themes

プロジェクトが UI の一部のみに異なるテーマが必要な場合 (コンポーネントプレビュー、テーム化されたセクション、ネストされたデモ) に ScopedTheme を使用し、アプリ全体のテーマを変更することなく:

import { ScopedTheme } from 'uniwind';

<View className="gap-3">
  <PreviewCard />

  <ScopedTheme theme="light">
    <PreviewCard />
  </ScopedTheme>

  <ScopedTheme theme="dark">
    <PreviewCard />
  </ScopedTheme>
</View>

重要な動作:

• 最も近い ScopedTheme が優先されます (ネストされたスコープがサポートされています)
• useUniwind、useResolveClassNames、useCSSVariable などのフックは最も近いスコープ化されたテーマに対して解決します
• スコープ内の withUniwind ラップされたサードパーティコンポーネントも、そのスコープからテーマ化された値を解決します
• カスタムテーム名は ScopedTheme で使用できます (extraThemes で定義されている必要があります)

テーム別にスタイルを設定 — CSS 変数を優先

ドキュメント: https://docs.uniwind.dev/theming/style-based-on-themes

明示的な dark:/light: バリアント上に CSS 変数ベースのクラスを使用することを優先します。代わりに:

// このパターンは避けてください
<View className="light:bg-white dark:bg-black" />

CSS 変数を定義して直接使用します:

@layer theme {
  :root {
    @variant light { --color-background: #ffffff; }
    @variant dark { --color-background: #000000; }
  }
}

// 推奨 — 自動的にテーマに適応
<View className="bg-background" />

これはより清潔で、保守しやすく、カスタムテーマでも自動的に機能します。

ランタイム CSS 変数更新

ドキュメント: https://docs.uniwind.dev/theming/update-css-variables

テーマ変数をランタイムで更新します。例: ユーザー設定や API レスポンスに基づいて:

import { Uniwind } from 'uniwind';

// ユーザー入力または API レスポンスに基づいてテーマを事前設定
Uniwind.updateCSSVariables('light', {
  '--color-primary': '#ff6600',
  '--color-background': '#1a1a2e',
});

このパターンは、アプリが実際のランタイムテーマ設定ニーズを持つ場合にのみ使用されるべきです (例: ユーザーが選択したブランドカラーまたは API 駆動のテーマ)。

tailwind-variants を使用したバリアント

ドキュメント: https://docs.uniwind.dev/tailwind-basics#advanced-pattern-variants-and-compound-variants

コンポーネントバリアントと複合バリアントの場合、tailwind-variants ライブラリを使用します:

import { tv } from 'tailwind-variants';

const button = tv({
  base: 'px-4 py-2 rounded-lg',
  variants: {
    color: {
      primary: 'bg-primary text-white',
      secondary: 'bg-secondary text-white',
    },
    size: {
      sm: 'text-sm',
      lg: 'text-lg px-6 py-3',
    },
  },
});

<Pressable className={button({ color: 'primary', size: 'lg' })} />

モノレポサポート

ドキュメント: https://docs.uniwind.dev/monorepos

プロジェクトがモノレポの場合、global.css に @source ディレクティブを追加して、CSS エントリファイルのディレクトリの外にあるパッケージをスキャンするように Tailwind に指示します (そのディレクトリに Tailwind クラスのあるコンポーネントがある場合のみ):

@import 'tailwindcss';
@import 'uniwind';
@source "../../packages/ui/src";
@source "../../packages/shared/src";

FAQ

ドキュメント: https://docs.uniwind.dev/faq

カスタムフォント: Uniwind は className をフォントファミリーにのみマッピングしています — フォントファイルは別途ロードする必要があります (app.json の expo-font プラグインまたはベア RN の react-native-asset)。@theme のフォントファミリー名は、ファイル名 (拡張子なし) と正確に一致する必要があります。プラットフォーム別フォント用に @variant を使用してください (@layer theme { :root { } } 内に必須):

@layer theme {
  :root {
    @variant ios { --font-sans: 'SF Pro Text'; }
    @variant android { --font-sans: 'Roboto-Regular'; }
    @variant web { --font-sans: 'system-ui'; }
  }
}

Data セレクタ: prop ベースのスタイリングには data-[prop=value]:utility を使用します。等価チェックのみサポート:

<View data-state={isOpen ? 'open' : 'closed'} className="data-[state=open]:bg-muted/50" />

Expo Router での global.css 位置: プロジェクトルートに配置し、ルートレイアウト (app/_layout.tsx) にインポートします。app/ に配置した場合、外側のコンポーネントに @source ディレクティブが必要です。Tailwind は global.css の場所からスキャンします。

CSS 変更時の完全なアプリ再ロード: Metro は多くのプロバイダを持つファイルをホットリロードできません。global.css インポートをコンポーネントツリーの深い部分 (例: ナビゲーションルートまたはホームスクリーン) に移動して修正してください。

グラデーション: ビルトインサポート、追加の依存関係は不要。bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 を使用します。expo-linear-gradient の場合、useCSSVariable を使用してカラーを取得します — グラデーション props は配列なので withUniwind は機能しません。

スタイル特異性: インライン style は常に className をオーバーライドします。静的スタイルに className を使用し、インラインは本当に動的な値にのみ使用します。同じプロパティに両方を混在させないでください。

シリアライゼーション エラー (Failed to serialize javascript object): キャッシュをクリア: watchman watch-del-all 2>/dev/null; rm -rf node_modules/.cache && npx expo start --clear。一般的な原因: 複雑な @theme config、循環 CSS 変数参照。

Metro unstable_enablePackageExports 競合: 一部のアプリ (crypto など) がこれを無効にし、Uniwind を破壊します。選択的リゾルバを使用:

config.resolver.unstable_enablePackageExports = false;
config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (['uniwind', 'culori'].some((prefix) => moduleName.startsWith(prefix))) {
    return context.resolveRequest({ ...context, unstable_enablePackageExports: true }, moduleName, platform);
  }
  return context.resolveRequest(context, moduleName, platform);
};

Safe Area クラス: p-safe、pt-safe、pb-safe、px-safe、py-safe、m-safe、mt-safe など。また -or-{value} (最小間隔) と -offset-{value} (追加間隔) バリアントもサポート。

Next.js: 公式にはサポートされていません。Uniwind は Metro と Vite 向けです。コミュニティプラグイン: uniwind-plugin-next。Next.js の場合、標準 Tailwind CSS を使用してデザイントークンを共有します。

Vite: v1.2.0 以降サポート。@tailwindcss/vite とともに uniwind/vite プラグインを使用します。

UI Kit: HeroUI Native、react-native-reusables、Gluestack 4.1+ は Uniwind とうまく機能します

既知の問題と落とし穴

1. data- 属性*: Uniwind は data-[prop=value]:utility 構文をサポートしており、NativeWind と同様に条件付きスタイリングに使用できます。
2. アニメーション化されたスタイル: NativeWind のアニメーション化されたクラスを react-native-reanimated に直接移行します。Uniwind Pro には組み込みの Reanimated サポートがあります。

検証

移行後に確認:

1. npx react-native start --reset-cache (Metro キャッシュをクリア) または expo で npx expo start -c
2. すべてのスクリーンが iOS と Android で正しくレンダリングされる
3. テーム切り替えが機能する (light/dark)
4. カスタムフォントが正しくロードされる
5. Safe area インセットが正しく適用される
6. コンソールに見落としたスタイルについての警告がない
7. nativewind または react-native-css-interop からの残りのインポートがない

重要: Uniwind API を推測しないでください。Uniwind API、フック、コンポーネント、または設定オプションについて不確かな場合、公式ドキュメントに対して取得して確認してください: https://docs.uniwind.dev/llms-full.txt