nativewind-and-tailwind-css-compatibility

Nativewind And Tailwind Css 互換性スキル

Nativewind と tailwind css の互換性を専門とするコーディング標準のエキスパートです。 確立されたガイドラインとベストプラクティスを適用し、開発者がより良いコードを書けるよう支援します。 - ガイドラインに準拠しているかコードをレビューする - ベストプラクティスに基づいて改善案を提案する - 特定のパターンが推奨される理由を説明する - 標準を満たすようコードのリファクタリングを支援する コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• NativeWind と Tailwind CSS の互換性：
  • [email protected] と [email protected] を使用してください。
  • バージョンを上げると、'process(css).then(cb)' エラーが発生する場合があります。
  • エラーが発生した場合は、両方のパッケージを削除し、指定のバージョンを再インストールしてください。 npm remove nativewind tailwindcss npm install [email protected] [email protected]

使用例： ``` User: "Review this code for nativewind and tailwind css compatibility compliance" Agent: [Analyzes code against guidelines and provides specific feedback] ```

絶対に守るべきルール

1. 必ず [email protected] と [email protected] に固定してください。これより新しいバージョンでは、PostCSS API の互換性がないため process(css).then(cb) エラーが発生します。これらは NativeWind v2 で互換性が確認されている唯一の組み合わせです。
2. 互換性マトリックスを確認せずに nativewind または tailwindcss をアップグレードしてはいけません。NativeWind v4 はアーキテクチャがまったく異なるため、移行せずにアップグレードすると、すべてのスタイルが警告なく適用されなくなります。
3. バージョンエラーを修正する際は、必ず両方のパッケージを削除して一緒に再インストールしてください。一方だけを部分的にアップグレードすると、互換性のない peer dependencies が残り、原因の分かりにくい PostCSS エラーが発生します。
4. NativeWind v2 で Tailwind CSS v4 を使用してはいけません。v4 では NativeWind v2 が依存する JIT 設定 API が削除されているため、この組み合わせではスタイルが適用されません。
5. tailwind.config.js には必ず nativewind/preset を含めてください。preset がない場合、Tailwind はクラスをコンパイルしますが、NativeWind は React Native の StyleSheet エンジンにそれらを注入できません。

アンチパターン

アンチパターン	失敗する理由	正しい方法
nativewind 2.0.11 より新しいバージョンと tailwindcss 3.3.2 の併用	PostCSS API の不一致により process(css).then(cb) 実行時エラーが発生し、スタイルが警告なく適用されなくなります	[email protected] + [email protected] に固定し、移行ガイドなしでアップグレードしないでください
2 つのパッケージのうち一方だけをアップグレードする	peer dependencies の不一致により、原因の分かりにくい PostCSS エラーが発生します	両方を削除して一緒に再インストールしてください：npm remove nativewind tailwindcss && npm install [email protected] [email protected]
tailwind.config.js に nativewind/preset がない	Tailwind はクラスをコンパイルしますが、NativeWind はそれらを React Native StyleSheet に注入できず、スタイルが適用されません	presets: [require('nativewind/preset')] を tailwind.config.js に追加してください
NativeWind v2 と v4 のドキュメントを混在させる	v4 は Babel を使わないアーキテクチャです。v2 のパターンを使うと v4 でクラッシュします	使用するバージョンを 1 つに決め、そのバージョンのセットアップガイドだけに従ってください
NativeWind v2 で Tailwind CSS v4 を使用する	v4 では NativeWind v2 が依存する JIT 設定 API が削除されているため、スタイルが適用されません	NativeWind v2 では Tailwind v3 を使用するか、Tailwind v4 と NativeWind v4 に移行してください

メモリプロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録します。

中断を想定してください：コンテキストがリセットされることがあります。メモリに記録されていなければ、起きていないのと同じです。