Zenn
🚀

React Native × Tailwind CSS：NativeWind v4 を最短で導入する方法

に公開
React Native
Tailwind CSS
NativeWind
tech

概要

このガイドでは、React Native CLI プロジェクトに NativeWind v4 を導入する最小限の手順を紹介します。

1. 必要なパッケージのインストール

pnpm add nativewind
pnpm add -D tailwindcss

2. Tailwind 設定ファイルの作成

npx tailwindcss init

tailwind.config.js を以下のように修正します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./App.{js,jsx,ts,tsx}'],
  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Babel 設定

babel.config.js を以下のように設定します。

module.exports = {
  presets: [
    ['module:metro-react-native-babel-preset', { jsxImportSource: 'nativewind' }],
    'nativewind/babel',
  ],
  plugins: ['react-native-reanimated/plugin'],
};

4. CSS ファイルの作成

プロジェクト内に src/styles/global.css を作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

5. App.tsx にインポート

import './src/styles/global.css';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold">Hello, NativeWind!</Text>
    </View>
  );
}

6. Metro 設定（必要に応じて）

metro.config.js に以下を追記して NativeWind を統合します。

const { withNativeWind } = require('nativewind/metro');

module.exports = withNativeWind({});

完了！

これで NativeWind v4 を React Native CLI プロジェクトに導入できました。Tailwind のクラスを使ったスタイリングがすぐに使える状態になっています。あとは普段どおりに className を使って、スピーディにデザインを仕上げていきましょう。

Discussion