Radix Themes + Tailwind Harmony (#3355)

reflex/.templates/web/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

reflex/.templates/web/styles/tailwind.css

@@ -1,3 +1,6 @@
-@tailwind base;
+@import "tailwindcss/base";
+
+@import "@radix-ui/themes/styles.css";
+
 @tailwind components;
 @tailwind utilities;

reflex/components/radix/themes/base.py

@@ -6,7 +6,8 @@ from typing import Any, Dict, Literal
 
 from reflex.components import Component
 from reflex.components.tags import Tag
-from reflex.utils import imports
+from reflex.config import get_config
+from reflex.utils.imports import ImportVar
 from reflex.vars import Var
 
 LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
@@ -208,18 +209,23 @@ class Theme(RadixThemesComponent):
             children = [ThemePanel.create(), *children]
         return super().create(*children, **props)
 
-    def _get_imports(self) -> imports.ImportDict:
+    def add_imports(self) -> dict[str, list[ImportVar] | ImportVar]:
-        return imports.merge_imports(
+        """Add imports for the Theme component.
-            super()._get_imports(),
+
-            {
+        Returns:
-                "": [
+            The import dict.
-                    imports.ImportVar(tag="@radix-ui/themes/styles.css", install=False)
+        """
-                ],
+        _imports: dict[str, list[ImportVar] | ImportVar] = {
-                "/utils/theme.js": [
+            "/utils/theme.js": [ImportVar(tag="theme", is_default=True)],
-                    imports.ImportVar(tag="theme", is_default=True),
+        }
-                ],
+        if get_config().tailwind is None:
-            },
+            # When tailwind is disabled, import the radix-ui styles directly because they will
-        )
+            # not be included in the tailwind.css file.
+            _imports[""] = ImportVar(
+                tag="@radix-ui/themes/styles.css",
+                install=False,
+            )
+        return _imports
 
     def _render(self, props: dict[str, Any] | None = None) -> Tag:
         tag = super()._render(props)
@@ -243,13 +249,13 @@ class ThemePanel(RadixThemesComponent):
     # Whether the panel is open. Defaults to False.
     default_open: Var[bool]
 
-    def _get_imports(self) -> dict[str, list[imports.ImportVar]]:
+    def add_imports(self) -> dict[str, str]:
-        return imports.merge_imports(
+        """Add imports for the ThemePanel component.
-            super()._get_imports(),
+
-            {
+        Returns:
-                "react": [imports.ImportVar(tag="useEffect")],
+            The import dict.
-            },
+        """
-        )
+        return {"react": "useEffect"}
 
     def _get_hooks(self) -> str | None:
         # The panel freezes the tab if the user color preference differs from the

reflex/components/radix/themes/base.pyi

@@ -10,7 +10,8 @@ from reflex.style import Style
 from typing import Any, Dict, Literal
 from reflex.components import Component
 from reflex.components.tags import Tag
-from reflex.utils import imports
+from reflex.config import get_config
+from reflex.utils.imports import ImportVar
 from reflex.vars import Var
 
 LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
@@ -579,8 +580,10 @@ class Theme(RadixThemesComponent):
             A new component instance.
         """
         ...
+    def add_imports(self) -> dict[str, list[ImportVar] | ImportVar]: ...
 
 class ThemePanel(RadixThemesComponent):
+    def add_imports(self) -> dict[str, str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/constants/installer.py

@@ -123,4 +123,5 @@ class PackageJson(SimpleNamespace):
     DEV_DEPENDENCIES = {
         "autoprefixer": "10.4.14",
         "postcss": "8.4.31",
+        "postcss-import": "16.1.0",
     }