feat: migrate to nativewind v4

babel.config.js

@@ -1,7 +1,10 @@
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
     plugins: [
       [
         'module-resolver',
@@ -24,7 +27,6 @@ module.exports = function (api) {
           ],
         },
       ],
-      ['nativewind/babel', { mode: 'compileOnly' }],
       'react-native-reanimated/plugin',
     ],
   };

global.css

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

metro.config.js

@@ -1,4 +1,6 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
 
-module.exports = getDefaultConfig(__dirname);
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });

nativewind-env.d.ts

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

package.json

@@ -62,7 +62,7 @@
     "expo-system-ui": "~2.9.3",
     "i18next": "^22.5.1",
     "lodash.memoize": "^4.1.2",
-    "nativewind": "^2.0.11",
+    "nativewind": "^4.0.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.4",
@@ -80,6 +80,7 @@
     "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.10",
     "react-query-kit": "^1.5.2",
+    "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
     "zustand": "^4.5.0"
   },