uniwind

Uniwind

Uniwind 1.7.0+ / Uniwind Pro 1.2.1+ / Tailwind CSS v4 / React Native 0.81+ / Expo SDK 54+

バージョンがこれより古い場合は、最高の使用感を得るため、1.7.0+（無料版）／1.2.1+（Pro）への更新をおすすめします。

LayoutDirection は Uniwind 1.8.0+ で利用できます。

ScopedVariables は CSS 変数のオーバーライドをコンポーネントのサブツリー内に限定します。Uniwind 1.11.0+／Uniwind Pro 1.6.0+ で利用できます。

ネイティブ CSS のカスケード順序（レイヤー、詳細度、ソース順）は、Uniwind 1.13.0+／Uniwind Pro 1.9.0+ から適用されます。これより古いバージョンでは、競合するカスタムクラスとユーティリティの解決方法が異なります。

Uniwind は Tailwind CSS v4 を React Native に導入します。すべての React Native コアコンポーネントは、標準で className プロパティをサポートしています。スタイルはビルド時にコンパイルされるため、実行時のオーバーヘッドはありません。

重要なルール

1. Tailwind v4 のみ — @tailwind base ではなく @import 'tailwindcss' を使用してください。Tailwind v3 はサポートされていません。
2. classNames を動的に組み立てないでください — Tailwind はビルド時にスキャンします。bg-${color}-500 は機能しません。完全な文字列リテラル、マッピングオブジェクト、または三項演算子を使用してください。
3. cssInterop や remapProps は使用しないでください — これらは NativeWind の API です。Uniwind はグローバルコンポーネントをオーバーライドしません。
4. tailwind.config.js は不要です — すべての設定は @theme と @layer theme を使って global.css に記述してください。
5. ThemeProvider は不要です — Uniwind.setTheme() を直接使用してください。
6. withUniwindConfig は Metro 設定のラッパーの中で最も外側に配置する必要があります。
7. react-native または react-native-reanimated のコンポーネントを withUniwind でラップしないでください — View、Text、Pressable、Image、TextInput、ScrollView、FlatList、Switch、Modal、Animated.View、Animated.Text などは、すでに className を完全にサポートしています。これらを withUniwind でラップすると、動作に支障をきたします。withUniwind はサードパーティ製コンポーネント（例：expo-image、expo-blur、moti）にのみ使用してください。
8. フォントファミリーは単一のフォントのみ — React Native はフォールバックをサポートしていません。'Roboto', sans-serif ではなく、--font-sans: 'Roboto-Regular' を使用してください。
9. すべてのテーマバリアントで同じ CSS 変数を定義する必要があります — light で --color-primary を定義する場合、dark とすべてのカスタムテーマでも定義してください。変数が一致しないと、実行時エラーが発生します。
10. スタイル以外の色プロパティには accent- プレフィックスが必須です — これは非常に重要です。color（Button、ActivityIndicator）、tintColor（Image）、thumbColor（Switch）、placeholderTextColor（TextInput）のようなプロパティは style オブジェクトの一部ではありません。対応する {propName}ClassName プロパティと、accent- プレフィックス付きのクラスを必ず使用してください。例：<ActivityIndicator colorClassName="accent-blue-500" />。<ActivityIndicator className="text-blue-500" /> は使用しないでください。通常の Tailwind の色クラス（text-blue-500 など）は、style にマッピングされる className でのみ機能します。スタイル以外の色プロパティには、必ず accent- を使用してください。
11. rem のデフォルト値は 16px です — NativeWind では 14px でした。移行する場合は、Metro 設定で polyfills: { rem: 14 } を設定してください。
12. cssEntryFile には相対パスの文字列を指定してください — path.resolve(__dirname, 'global.css') ではなく、'./global.css' を使用してください。
13. ネイティブでは CSS カスケードに従います（Uniwind 1.13.0+ / Pro 1.9.0+） — 競合はブラウザーと同様に解決されます。優先順位は !important、カスケードレイヤー、セレクターの詳細度、コンパイル済み CSS 内の順序です。className 内のクラスの順序は影響しません。Tailwind のユーティリティは @layer utilities に配置されるため、通常の（!important ではない）宣言では、レイヤーに属さないカスタムクラス（.card { border-radius: 12px }）が rounded-2xl より優先されます。ユーティリティをカスタムクラスより優先させるには、@layer components { ... } 内で宣言してください。cn() / tailwind-merge が重複を除去するのは、Tailwind のユーティリティ同士のみです。card のようなカスタムクラスが除去されることはありません。
14. 重要度付きユーティリティをサポートしています — Tailwind の重要度修飾子は、末尾に ! を付けて className 内で使用できます：bg-red-500!、active:bg-red-500!、ios:pt-12!。先頭に ! を付ける !bg-red-500 形式は非推奨です。重要度付きユーティリティは、同じスタイルプロパティに対する重要度なしのユーティリティより優先されますが、インラインの style は引き続き className より優先されます。

参照先の振り分け

ユーザーのタスクを特定した後、references/ 内の関連する参照ファイルのみを読みます。

• セットアップ／設定のインストールに関する問題：references/setup.md
• React Native のコンポーネントの className プロパティ、アクセントカラーのプロパティ、またはコンポーネントの例：references/component-bindings.md
• サードパーティ製コンポーネント、withUniwind、動的なクラス名、tailwind-variants、cn、重要度ユーティリティ、またはスタイルの優先順位：references/styling-patterns.md
• テーマ、CSS 変数、ScopedTheme、LayoutDirection、色空間、または実行時変数 API：references/theming.md
• プラットフォーム、データ、状態、レスポンシブ、またはセーフエリアのユーティリティ：references/variants-and-selectors.md
• CSS 関数、カスタム CSS、@utility、@theme、フォント、またはグラデーション：references/css-and-utilities.md
• React Navigation、UI キット、サポートマトリックス、または未サポートのクラス：references/integrations.md
• Uniwind Pro のインストール、アニメーション、診断、グループバリアント、デフォルトスタイル、ネイティブのインセット、またはテーマのトランジション：references/pro.md
• スタイルの不具合、セットアップ診断、エラー、キャッシュの問題、FAQ の回答、MCP、または関連スキル：references/troubleshooting.md

ワークフロー

1. ユーザーがセットアップ、スタイリング、テーマ、バリアント、統合、Pro、トラブルシューティングのどれを必要としているかを特定します。
2. 詳細なガイダンスを提供したり、コードを編集したりする前に、該当する参照ファイルを読みます。
3. 選択した参照ファイルに記載がなくても、上記の重要なルールを適用します。
4. Uniwind API を推測しないでください。不明な場合は、公式ドキュメント（https://docs.uniwind.dev/llms-full.txt）で確認します。

関連スキル

NativeWind からの移行は意図的に分離されています。ユーザーが NativeWind から Uniwind への移行を希望する場合は、migrate-nativewind-to-uniwind スキルを使用してください。