refactor: migrate from nativewind to uniwind

Author: yjose

babel.config.js

@@ -2,8 +2,7 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: [
-      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
-      'nativewind/babel',
+      'babel-preset-expo',
     ],
     plugins: [
       [

eslint.config.mjs

@@ -2,9 +2,9 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import antfu from '@antfu/eslint-config';
+import betterTailwindcss from 'eslint-plugin-better-tailwindcss';
 import i18nJsonPlugin from 'eslint-plugin-i18n-json';
 import reactCompiler from 'eslint-plugin-react-compiler';
-import tailwind from 'eslint-plugin-tailwindcss';
 import testingLibrary from 'eslint-plugin-testing-library';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -82,6 +82,7 @@ export default antfu(
     files: ['**/*.ts', '**/*.tsx'],
     rules: {
       'ts/consistent-type-definitions': ['error', 'type'], // Prefer type over interface
+      'react-hooks/refs': 'off', // Allow useRef without exhaustive-deps
       'ts/consistent-type-imports': [
         'warn',
         {
@@ -93,15 +94,22 @@ export default antfu(
     },
   },
 
-  // TailwindCSS plugin
-  ...tailwind.configs['flat/recommended'].map(config => ({
-    ...config,
+  // Better TailwindCSS plugin
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    ...betterTailwindcss.configs.recommended,
+    settings: {
+      'better-tailwindcss': {
+        entryPoint: path.resolve(__dirname, './src/global.css'),
+      },
+    },
     rules: {
-      ...config.rules,
-      'tailwindcss/classnames-order': ['warn', { officialSorting: true }],
-      'tailwindcss/no-custom-classname': 'off',
+      ...betterTailwindcss.configs.recommended.rules,
+      'better-tailwindcss/no-unnecessary-whitespace': 'warn',
+      'better-tailwindcss/no-unknown-classes': 'warn',
+      'better-tailwindcss/enforce-consistent-line-wrapping': 'off', // Can be too strict for some cases
     },
-  })),
+  },
 
   // React Compiler plugin
   {

global.css

@@ -1,8 +1,10 @@
 /* eslint-env node */
 
 const { getDefaultConfig } = require('expo/metro-config');
-const { withNativeWind } = require('nativewind/metro');
+const { withUniwindConfig } = require('uniwind/metro');
 
 const config = getDefaultConfig(__dirname);
 
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = withUniwindConfig(config, {
+  cssEntryFile: './src/global.css',
+});

metro.config.js

@@ -69,7 +69,6 @@
     "i18next": "^25.8.0",
     "lodash.memoize": "^4.1.2",
     "moti": "^0.30.0",
-    "nativewind": "^4.2.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-error-boundary": "^6.1.0",
@@ -93,6 +92,7 @@
     "react-query-kit": "^3.3.2",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
+    "uniwind": "^1.2.4",
     "zod": "^4.3.5",
     "zustand": "^5.0.10"
   },
@@ -104,6 +104,7 @@
     "@dev-plugins/react-query": "^0.4.0",
     "@eslint-react/eslint-plugin": "^2.7.2",
     "@expo/config": "~12.0.13",
+    "@tailwindcss/cli": "^4.0.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/i18n-js": "^4.0.1",
@@ -116,12 +117,12 @@
     "dotenv": "^17.2.3",
     "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-better-tailwindcss": "^4.0.1",
     "eslint-plugin-i18n-json": "^4.0.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
-    "eslint-plugin-tailwindcss": "^3.18.2",
     "eslint-plugin-testing-library": "^7.15.4",
     "eslint-plugin-unicorn": "^62.0.0",
     "husky": "^9.1.7",
@@ -131,7 +132,7 @@
     "jest-junit": "^16.0.0",
     "lint-staged": "^16.2.7",
     "np": "^10.3.0",
-    "tailwindcss": "3.4.19",
+    "tailwindcss": "4.1.18",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3"
   },