ExpoでTailwind（NativeWind）を導入

はじめに

Expoのスタイル付けをTailwindと同じようにできるようになったと聞いて、早速試してみました
https://www.nativewind.dev/

導入

1. 依存関係の追加

yarn add nativewind
yarn add --dev tailwindcss

2. tailwind.config.jsの追加

以下のコマンドで追加できる

npx tailwind init

ReactやNext.jsで既に使っていればその設定をそのまま流用できる

3. Babel pluginの追加

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    ...
    plugins: ["nativewind/babel"],
    ...
  };
};

4. (typescriptを採用しているなら)型定義ファイルの追加

app.d.ts

/// <reference types="nativewind/types" />

初期化プロジェクトのコードを書き換えてみた

Before

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  header: {
    fontWeight: "bold",
    marginBottom: 20,
    fontSize: 36,
  },
});

After

export default function App() {
  return (
    <View className="flex flex-1 bg-white items-center justify-center">
      <Text className="font-bold mb-5 text-4xl">Native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

最後に

やっぱりTailwindを使うとコードが綺麗になる
create-t3-turboで構築できるプロジェクトでもNativeWindは採用されてるので、ReactではTailwindが主流になってきたようにReactNativeでもNativeWIndが主流になっていくと思う
今後出てくるヘッドレスコンポーネントに期待