feat: add tailwind-merge to web styles

package-lock.json

@@ -33000,6 +33000,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.7.0.tgz",
+      "integrity": "sha512-A7oBapTWhV9M4bwLtxLQS9ZpPrvcikp21l+Xhwbet5SbaxUVogbHGLy+VDZcHe4LHWE99RpRbSpCBKaVqBs5Og=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.0.tgz",
@@ -36004,6 +36009,7 @@
         "jest-expo": "^46.0.1",
         "micromatch": "^4.0.5",
         "react-is": "^18.1.0",
+        "tailwind-merge": "^1.7.0",
         "use-sync-external-store": "^1.1.0"
       },
       "devDependencies": {
@@ -56142,7 +56148,7 @@
         "find-cache-dir": "^3.3.2",
         "jest": "29.2.1",
         "jest-environment-jsdom": "29.2.1",
-        "jest-expo": "*",
+        "jest-expo": "^46.0.1",
         "metro-react-native-babel-preset": "0.73.2",
         "micromatch": "^4.0.5",
         "react": "18.2.0",
@@ -56152,6 +56158,7 @@
         "react-native-svg": "13.4.0",
         "react-native-web": "0.18.9",
         "react-test-renderer": "18.2.0",
+        "tailwind-merge": "*",
         "tailwindcss": "3.2.0",
         "ts-jest": "29.0.3",
         "typescript": "4.8.4",
@@ -60874,6 +60881,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "tailwind-merge": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.7.0.tgz",
+      "integrity": "sha512-A7oBapTWhV9M4bwLtxLQS9ZpPrvcikp21l+Xhwbet5SbaxUVogbHGLy+VDZcHe4LHWE99RpRbSpCBKaVqBs5Og=="
+    },
     "tailwindcss": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.0.tgz",

packages/nativewind/package.json

@@ -56,6 +56,7 @@
     "jest-expo": "^46.0.1",
     "micromatch": "^4.0.5",
     "react-is": "^18.1.0",
+    "tailwind-merge": "^1.7.0",
     "use-sync-external-store": "^1.1.0"
   },
   "devDependencies": {

packages/nativewind/src/styled/web/index.tsx

@@ -2,6 +2,8 @@
 import { ComponentType, ForwardedRef, forwardRef, useMemo } from "react";
 import { StyleProp } from "react-native";
 import { cva } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+
 import { Style } from "../../transform-css/types";
 import type { StyledOptions } from "../index";
 
@@ -23,19 +25,18 @@ export function styled(
       ? styledBaseClassNameOrOptions
       : baseClassName;
 
-  const classGenerator = cva(
-    [classProps, defaultClassName].filter(Boolean).join(" "),
-    cvaOptions
-  );
+  const classGenerator = cva([classProps, defaultClassName], cvaOptions);
 
   const Styled = forwardRef<unknown, any>(function (
     { className, tw, ...props },
     ref
   ) {
-    const generatedClassName = classGenerator({
-      class: tw ?? className,
-      ...props,
-    });
+    const generatedClassName = twMerge(
+      classGenerator({
+        class: tw ?? className,
+        ...props,
+      })
+    );
 
     return (
       <StyledComponent