styling-nativewind-v4-expo

SKILL.md

Accept className, merge defaults, and optionally use a class-variance helper.

Use remapProps (multiple style props) or cssInterop (map a class prop to a style prop).

On Expo Router, do not add your own SafeAreaProvider (Router already does). Use p-safe, pt-safe, etc.

Expo Router を含む Expo React Native アプリで NativeWind v4 (Tailwind CSS v3) をセットアップして使用します。 tailwind.config.js、global.css、babel.config.js (jsxImportSource + Nativewind/babel)、metro.config.js (withNativeWind + input)、および app.json (Web バンドラー Metro) を構成します。 「className が適用されない」、Tailwind CLI コンパイル、および Metro キャッシュの問題をトラブルシューティングします。再利用可能なコンポーネント/バリアント、CSS 変数 (vars/useColorScheme) によるダーク モード + テーマ、およびサードパーティ コンポーネント スタイル (remapProps/cssInterop) を実装します。 NativeWind v4、Tailwind スタイルの className ユーティリティを使用して Expo プロジェクトで作業する場合、または NativeWind 構成をデバッグする場合に使用します。 ソース: tristanmanchester/agent-skills。

原文を見る