mcpField
N
nativewind

nativewind

github.com/hairyfデザイン・UI26289 回インストール2 週間前に更新
リポジトリ

nativewind について

NativeWind v5 と Tailwind CSS v4 で React Native コンポーネントをスタイリングするスキルです。設定、プラットフォーム別の動作、テーマ、バージョン移行を扱います。

主な機能

  1. 01className による Tailwind スタイル適用
  2. 02CSS ファーストのテーマとユーティリティ設定
  3. 03プラットフォーム別・レスポンシブなバリアント
  4. 04状態スタイルとダークモード
  5. 05サードパーティコンポーネントの適応
  6. 06v4 から v5 への移行

活用シーン

  1. 01複数プラットフォームの React Native コンポーネントをスタイリング
  2. 02レスポンシブレイアウトとダークモードの設定
  3. 03サードパーティコンポーネントに className を適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hairyf/skills --skill nativewind

インストール後、Claude Code で/nativewindを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
references/
advanced-migrate-v4.md
advanced-theme.md
api-css-interop-remap.md
api-styled.md
api-vars-runtime.md
api-with-nativewind.md
best-practices-performance.md
best-practices-v5-deprecations.md
core-config.md
core-setup.md
core-v5-functions-directives.md
core-v5-style-specificity.md
core-v5-tailwind-foundation.md
core-v5-units.md
features-platform.md
features-states.md
features-styling.md
features-v5-responsive.md
features-v5-states-pseudo.md
features-v5-third-party-guide.md

詳細

Skill は NativeWind v5（Tailwind CSS v4）をベースとしており、2026-02-26 に生成されました。

NativeWind は React Native 向けに Tailwind CSS をコンパイルします。コンポーネントでは className を使用し、ネイティブでは StyleSheet.create を使い、Web では Tailwind スタイルシートを再利用します。メディアクエリ／コンテナークエリ、疑似クラス（hover、focus、active）、プラットフォームバリアント（ios:、android:、native:、web:）、ダークモード、CSS ファースト設定によるカスタムテーマ／ユーティリティに対応しています。

主なリファレンス

トピック説明リファレンス
セットアップCSS ファイル、Metro withNativewind、PostCSS、アプリのエントリーポイント、任意の lightningcss の固定core-setup
設定CSS ファースト設定、@theme、@source、nativewind/theme、カスタムユーティリティ／バリアントcore-config
v5 Tailwind の基盤Tailwind v4 をベースとした設計、CSS ファースト、Web とネイティブのサポートcore-v5-tailwind-foundation
v5 の単位ネイティブでの px、%、vw/vh、rem、em、dp と px、rem によるサイズ指定core-v5-units
v5 の関数とディレクティブ@import、@theme、@utility、var()、calc()、env()、color-mix()、RN の関数core-v5-functions-directives
v5 のスタイルの優先順位優先順位、!important、className と style のマージcore-v5-style-specificity

機能

トピック説明リファレンス
コンポーネントのスタイリングclassName の使用方法、カスタムコンポーネントとサードパーティ製コンポーネント、styled() / cssInterop / remapProps、nativeStyleToPropfeatures-styling
プラットフォームとレスポンシブ対応プラットフォームバリアント、単位、ブレークポイント、セーフエリアユーティリティfeatures-platform
v5 のレスポンシブ対応ネイティブでのブレークポイント、メディアクエリ、プラットフォームメディア、リアクティブな更新features-v5-responsive
状態とダークモードhover/focus/active、disabled/empty、group 修飾子、dark:、data 属性features-states
v5 の状態と疑似クラス疑似クラスの詳細な表、selection/placeholder、group、ltr/rtlfeatures-v5-states-pseudo
v5 サードパーティ製コンポーネントガイドclassName が渡されない場合、複数の style プロパティ、動的マッピング @propfeatures-v5-third-party-guide
テーマ設定と色@theme トークン、実行時 CSS 変数の vars()、色の挙動advanced-theme

API（v5）

トピック説明リファレンス
withNativewindMetro ラッパーのオプション（globalClassNamePolyfill、typescriptEnvPath）api-with-nativewind
styledサードパーティ製コンポーネント、nativeStyleToProp、複数の className プロパティapi-styled
vars と実行時変数vars()、VariableContextProvider、useUnstableNativeVariableapi-vars-runtime
cssInterop / remapPropsレガシー API（非推奨。styled を使用してください）— 移行のリファレンスapi-css-interop-remap

上級編

トピック説明リファレンス
v4 → v5 への移行手順、破壊的変更、非推奨事項advanced-migrate-v4

ベストプラクティス

トピック説明リファレンス
正確性とデバッグlight/dark の明示、View ではなく Text に色を指定、キャッシュ、DEBUG、verifyInstallationbest-practices-performance
v5 の非推奨事項useColorScheme → RN、cssInterop/remapProps → styled、@prop 修飾子best-practices-v5-deprecations

コメント

Markdown 対応