uniwind

Uniwind のベストプラクティス

Uniwind のパフォーマンス最適化とベストプラクティスを網羅したガイドです。React Native 向けの最速の Tailwind CSS バインディングとして、影響度に基づいて優先順位付けされた 8 カテゴリ、45 以上のルールを収録し、自動リファクタリングとコード生成を支援します。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• 新しい React Native プロジェクトで Uniwind をセットアップするとき
• Metro プラグインと CSS エントリーポイントを設定するとき
• CSS 変数を使ってテーマシステムを構築するとき
• className に対応したサードパーティコンポーネントを統合するとき
• モバイルやタブレット向けのレスポンシブレイアウトを作成するとき
• スタイリングのパフォーマンスを最適化するとき
• NativeWind から Uniwind に移行するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	ビルド時の設定	重大	build-
2	テーマアーキテクチャ	重大	theme-
3	コンポーネントの統合	高	comp-
4	レスポンシブデザイン	高	resp-
5	パフォーマンス最適化	中〜高	perf-
6	プラットフォームのパターン	中	plat-
7	状態とインタラクション	中	state-
8	移行と互換性	低〜中	compat-

クイックリファレンス

1. ビルド時の設定（重大）

• build-metro-config - 必須オプションを指定して Metro プラグインを設定する
• build-css-entry - アプリのルートディレクトリに CSS エントリーファイルを配置する
• build-typescript-types - TypeScript 定義ファイルの場所を設定する
• build-restart-metro - 設定変更後に Metro を再起動する
• build-debug-mode - 開発中にデバッグモードを有効にする
• build-rem-polyfill - デザインシステムの一貫性を保つために rem の基準値を設定する

2. テーマアーキテクチャ（重大）

• theme-css-variables - @theme ディレクティブでテーマ変数を定義する
• theme-variant-blocks - テーマ定義には @variant ブロックを使用する
• theme-consistent-variables - すべてのテーマで同一の変数を定義する
• theme-custom-registration - Metro 設定にカスタムテーマを登録する
• theme-oklch-colors - 知覚的な均一性のために OKLCH 色空間を使用する
• theme-light-dark-function - 色の適応には light-dark() 関数を使用する
• theme-no-provider - アプリから ThemeProvider ラッパーを削除する

3. コンポーネントの統合（高）

• comp-with-uniwind - サードパーティコンポーネントには withUniwind を使用する
• comp-module-level - ラップしたコンポーネントをモジュールレベルで定義する
• comp-prop-mapping - スタイル以外の props にはカスタム prop マッピングを使用する
• comp-accent-colors - 色 prop の抽出には accent-* クラスを使用する
• comp-reanimated - Reanimated コンポーネントは withUniwind なしで動作する
• comp-custom-css - 複雑で再利用可能なスタイルにはカスタム CSS クラスを使用する

4. レスポンシブデザイン（高）

• resp-mobile-first - モバイルファーストで設計し、段階的に機能を強化する
• resp-limit-breakpoints - 保守性のためにブレークポイントを 3〜5 個に制限する
• resp-visibility-toggle - レスポンシブな表示切り替えには hidden/flex を使用する
• resp-custom-breakpoints - 意味のある名前でカスタムブレークポイントを定義する
• resp-responsive-spacing - 余白とタイポグラフィをレスポンシブに拡大縮小する

5. パフォーマンスの最適化（中〜高）

• perf-static-classnames - ビルド時の解決には完全な静的クラス名を使用する
• perf-use-resolve-sparingly - useResolveClassNames の使用は控える
• perf-memoize-variants - バリアントのスタイルオブジェクトをメモ化する
• perf-tailwind-merge - クラスの重複排除には tailwind-merge を使用する
• perf-avoid-inline-styles - インラインの style プロパティより className を優先する
• perf-combine-styles - className と style プロパティを正しく組み合わせる

6. プラットフォームのパターン（中）

• plat-ios-android-selectors - iOS／Android の違いにはプラットフォームセレクターを使用する
• plat-safe-area-context - セーフエリアには react-native-safe-area-context を使用する
• plat-yoga-layout - Yoga レイアウトエンジンの違いを理解する
• plat-web-selector - クロスプラットフォームアプリには web: セレクターを使用する
• plat-font-families - フォールバックなしでフォントファミリーを設定する

7. 状態とインタラクション（中）

• state-pressable-states - active:／focus:／disabled: 状態には Pressable を使用する
• state-data-selectors - コンポーネントの状態のスタイリングにはデータセレクターを使用する
• state-no-hover - ネイティブでは hover: を避け、代わりに active: を使用する
• state-group-variants - 親子のスタイリングにはグループバリアントを使用する（作業中）
• state-dark-mode - ダークモードのスタイルには dark: バリアントを使用する

8. 移行と互換性（低〜中）

• compat-nativewind-migration - NativeWind の移行チェックリストに従う
• compat-tailwind-4-syntax - Tailwind 4 の CSS ファースト設定を使用する
• compat-rem-default - rem のデフォルト値の違いを考慮する
• compat-cssinterop-replacement - cssInterop を withUniwind に置き換える
• compat-safe-area-changes - *-safe クラスを Safe Area Context に置き換える

使用方法

詳しい説明とコード例については、各リファレンスファイルを参照してください。

• セクションの定義 - カテゴリーの構造と影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールをまとめた完全なガイド
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報