diff --git a/package-lock.json b/package-lock.json index a1d7f64..134c6f3 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/nativewind/package.json b/packages/nativewind/package.json index f859892..ce372b6 100644 --- a/packages/nativewind/package.json +++ b/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": { diff --git a/packages/nativewind/src/styled/web/index.tsx b/packages/nativewind/src/styled/web/index.tsx index 467379d..e28370f 100644 --- a/packages/nativewind/src/styled/web/index.tsx +++ b/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(function ( { className, tw, ...props }, ref ) { - const generatedClassName = classGenerator({ - class: tw ?? className, - ...props, - }); + const generatedClassName = twMerge( + classGenerator({ + class: tw ?? className, + ...props, + }) + ); return (