ENG-10639: Update Reflex UI twmerge utility to use clsx and tailwind-…

docs/app/reflex.lock/package.json

@@ -28,6 +28,7 @@
     "ag-grid-community": "34.3.1",
     "ag-grid-enterprise": "34.3.1",
     "ag-grid-react": "34.3.1",
+    "clsx": "2.1.1",
     "clsx-for-tailwind": "1.0.0",
     "es-toolkit": "1.46.1",
     "gridjs": "6.2.0",
@@ -73,6 +74,7 @@
     "shiki": "3.3.0",
     "socket.io-client": "4.8.3",
     "sonner": "2.0.7",
+    "tailwind-merge": "3.6.0",
     "tailwindcss-animated": "2.0.0",
     "tailwindcss-scroll-mask": "0.0.3",
     "universal-cookie": "7.2.2",

packages/reflex-components-internal/src/reflex_components_internal/utils/twmerge.py

@@ -4,9 +4,14 @@
 from reflex.vars import FunctionVar, Var
 from reflex.vars.base import VarData
 
-CN = Var(
-    "cn",
-    _var_data=VarData(imports={"clsx-for-tailwind@1.0.0": ImportVar(tag="cn")}),
+CLSX = Var(
+    "clsx",
+    _var_data=VarData(imports={"clsx@2.1.1": ImportVar(tag="clsx", is_default=True)}),
+).to(FunctionVar)
+
+TW_MERGE = Var(
+    "twMerge",
+    _var_data=VarData(imports={"tailwind-merge@3.6.0": ImportVar(tag="twMerge")}),
 ).to(FunctionVar)
 
 
@@ -22,4 +27,4 @@ def cn(
         Var: A Var representing the merged classes string.
 
     """
-    return CN.call(*classes).to(str)
+    return TW_MERGE.call(CLSX.call(*classes)).to(str)

tests/units/reflex_components_internal/utils/test_twmerge.py

@@ -0,0 +1,24 @@
+from reflex_base.utils.imports import ImportVar
+from reflex_base.vars import Var
+from reflex_components_internal.utils.twmerge import cn
+
+
+def test_cn_uses_clsx_and_tailwind_merge() -> None:
+    """The class utility should flatten inputs before resolving Tailwind conflicts."""
+    merged = cn(
+        "px-2",
+        Var("dynamic"),
+        ["px-4", None],
+        ("font-bold",),
+    )
+
+    assert (
+        str(merged)
+        == '(twMerge((clsx("px-2", dynamic, ["px-4", null], ["font-bold"]))))'
+    )
+    var_data = merged._get_all_var_data()
+    assert var_data is not None
+    assert dict(var_data.imports) == {
+        "clsx@2.1.1": (ImportVar(tag="clsx", is_default=True),),
+        "tailwind-merge@3.6.0": (ImportVar(tag="twMerge"),),
+    }