nativewind v4

apps/expo/babel.config.js

@@ -1,32 +1,15 @@
-const path = require("path");
-const loadConfig = require("tailwindcss/loadConfig");
-
-/** @type {import("tailwindcss").Config | null} */
-let _tailwindConfig = null;
-/**
- * Transpiles tailwind.config.ts for babel
- * Fix until nativewind babel plugin supports tailwind.config.ts files
- */
-function lazyLoadConfig() {
-  return (
-    _tailwindConfig ?? loadConfig(path.join(__dirname, "tailwind.config.ts"))
-  );
-}
-
 /** @type {import("@babel/core").ConfigFunction} */
 module.exports = function (api) {
   api.cache.forever();
 
   return {
-    presets: ["babel-preset-expo"],
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
     plugins: [
-      [
-        "nativewind/babel",
-        {
-          tailwindConfig: lazyLoadConfig(),
-        },
-      ],
       require.resolve("expo-router/babel"),
+      require.resolve("react-native-reanimated/plugin"),
     ],
   };
 };

apps/expo/metro.config.js

@@ -1,12 +1,14 @@
 // Learn more: https://docs.expo.dev/guides/monorepos/
 const { getDefaultConfig } = require("@expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
 const path = require("path");
 
 const projectRoot = __dirname;
 const workspaceRoot = path.resolve(projectRoot, "../..");
 
 // Create the default Metro config
-const config = getDefaultConfig(projectRoot);
+const config = getDefaultConfig(projectRoot, { isCSSEnabled: true });
 
 if (config.resolver) {
   // 1. Watch all files within the monorepo
@@ -20,4 +22,8 @@ if (config.resolver) {
   config.resolver.disableHierarchicalLookup = true;
 }
 
-module.exports = config;
+// @ts-expect-error - FIXME: type is mismatching?
+module.exports = withNativeWind(config, {
+  input: "./src/styles.css",
+  configPath: "./tailwind.config.ts",
+});

apps/expo/package.json

@@ -27,11 +27,12 @@
     "expo-router": "2.0.10",
     "expo-splash-screen": "~0.22.0",
     "expo-status-bar": "~1.7.1",
-    "nativewind": "^2.0.11",
+    "nativewind": "^4.0.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
     "superjson": "2.2.0"

apps/expo/src/app/_layout.tsx

@@ -4,6 +4,8 @@ import { StatusBar } from "expo-status-bar";
 
 import { TRPCProvider } from "~/utils/api";
 
+import "../styles.css";
+
 // This is the main layout of the app
 // It wraps your pages with the providers they need
 const RootLayout = () => {

apps/expo/src/app/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { Button, Text, TextInput, Pressable, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Link, Stack } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
@@ -21,17 +21,17 @@ function PostCard(props: {
             params: { id: props.post.id },
           }}
         >
-          <TouchableOpacity>
+          <Pressable>
             <Text className="text-xl font-semibold text-pink-400">
               {props.post.title}
             </Text>
             <Text className="mt-2 text-white">{props.post.content}</Text>
-          </TouchableOpacity>
+          </Pressable>
         </Link>
       </View>
-      <TouchableOpacity onPress={props.onDelete}>
+      <Pressable onPress={props.onDelete}>
         <Text className="font-bold uppercase text-pink-400">Delete</Text>
-      </TouchableOpacity>
+      </Pressable>
     </View>
   );
 }
@@ -76,7 +76,7 @@ function CreatePost() {
           {error.data.zodError.fieldErrors.content}
         </Text>
       )}
-      <TouchableOpacity
+      <Pressable
         className="rounded bg-pink-400 p-2"
         onPress={() => {
           mutate({
@@ -86,7 +86,12 @@ function CreatePost() {
         }}
       >
         <Text className="font-semibold text-white">Publish post</Text>
-      </TouchableOpacity>
+      </Pressable>
+      {error?.data?.code === "UNAUTHORIZED" && (
+        <Text className="mt-2 text-red-500">
+          You need to be logged in to create a post
+        </Text>
+      )}
     </View>
   );
 }
@@ -105,7 +110,7 @@ const Index = () => {
       {/* Changes page title visible on the header */}
       <Stack.Screen options={{ title: "Home Page" }} />
       <View className="h-full w-full p-4">
-        <Text className="mx-auto pb-2 text-5xl font-bold text-white">
+        <Text className="pb-2 text-center text-5xl font-bold text-white">
           Create <Text className="text-pink-400">T3</Text> Turbo
         </Text>
 

apps/expo/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/expo/src/types/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

apps/expo/tailwind.config.ts

@@ -1,8 +1,10 @@
+// @ts-expect-error - no types
+import nativewind from "nativewind/preset";
 import type { Config } from "tailwindcss";
 
 import baseConfig from "@acme/tailwind-config";
 
 export default {
   content: ["./src/**/*.{ts,tsx}"],
-  presets: [baseConfig],
+  presets: [baseConfig, nativewind],
 } satisfies Config;

apps/nextjs/postcss.config.cjs

@@ -1,2 +1,6 @@
-// @ts-expect-error - No types for postcss
-module.exports = require("@acme/tailwind-config/postcss");
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};