weapp-tailwindcss-react-native

weapp-tailwindcss React Native

独立した Native コンパイラーを使用して Tailwind CSS 4 の候補を React Native の style manifest にコンパイルします。ミニプログラムの CSS 生成パイプラインは適用しません。

Metro の設定フィールドと manifest の完全なリファレンスについては、サイトの React Native / Expo 設定リファレンスをご覧ください。

ワークフロー

1. プロジェクトが Expo/React Native であり、uni-app App、Taro RN、App WebView ではないことを確認します。
2. ReactLynx/Rspeedy プロジェクトの場合は、$weapp-tailwindcss-lynx に移行します。これは className を保持してネイティブ CSS を生成し、RN manifest は使用しません。
3. Expo、React、React Native、Node、Tailwind CSS のバージョンを確認します。
4. references/expo-integration.md を読み、global.css、Metro ラッパー、型のエントリーポイントを設定します。
5. Expo では、withWeappTailwindcss() は一度だけ設定します。source、manifest、Babel JSX transform を処理し、class set を別途管理する必要はありません。
6. 静的な className には、事前生成された StyleSheet lookup を使用します。動的な完全な文字列の場合にのみ、制御された tw() を使用します。
7. manifest.warnings を確認し、サポートされていない CSS 宣言を成功したものとして扱わないでください。
8. Web はスモークテストにのみ使用し、最終的には Android/iOS シミュレーターまたは実機でレイアウト、カラーモード、プラットフォームバリアントを検証します。

境界

• NativeWind や react-native-css のランタイムを、暗黙的な依存関係として導入しません。
• @tailwindcss/vite や @tailwindcss/postcss を登録して、Tailwind CSS を別途生成しません。
• 通常の inline style は Tailwind class を上書きし、!important class は inline style を上書きします。テストではこの優先順位を維持してください。
• カスタムコンポーネントは className と style を受け取る必要があります。サードパーティコンポーネントの prop マッピングを自動的に推測しないでください。
• dark:、ios:、android:、native: は注入された環境によって選択されます。サポートされていない CSS は warning として表示されます。

出力要件

インストール手順、Metro/CSS/型の完全な設定、サポート範囲、manifest warning の確認方法、および Android/iOS での検証手順を出力してください。