diff --git a/reflex/.templates/web/postcss.config.js b/reflex/.templates/web/postcss.config.js index 33ad091d26d..1e7129835f3 100644 --- a/reflex/.templates/web/postcss.config.js +++ b/reflex/.templates/web/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: { + "postcss-import": {}, tailwindcss: {}, autoprefixer: {}, }, diff --git a/reflex/.templates/web/styles/tailwind.css b/reflex/.templates/web/styles/tailwind.css index b5c61c95671..e1c383749de 100644 --- a/reflex/.templates/web/styles/tailwind.css +++ b/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; diff --git a/reflex/components/radix/themes/base.py b/reflex/components/radix/themes/base.py index 559d1023966..8347877e65b 100644 --- a/reflex/components/radix/themes/base.py +++ b/reflex/components/radix/themes/base.py @@ -6,7 +6,8 @@ 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 @@ def create( children = [ThemePanel.create(), *children] return super().create(*children, **props) - def _get_imports(self) -> imports.ImportDict: - return imports.merge_imports( - super()._get_imports(), - { - "": [ - imports.ImportVar(tag="@radix-ui/themes/styles.css", install=False) - ], - "/utils/theme.js": [ - imports.ImportVar(tag="theme", is_default=True), - ], - }, - ) + def add_imports(self) -> dict[str, list[ImportVar] | ImportVar]: + """Add imports for the Theme component. + + Returns: + The import dict. + """ + _imports: dict[str, list[ImportVar] | ImportVar] = { + "/utils/theme.js": [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]]: - return imports.merge_imports( - super()._get_imports(), - { - "react": [imports.ImportVar(tag="useEffect")], - }, - ) + def add_imports(self) -> dict[str, str]: + """Add imports for the ThemePanel component. + + Returns: + 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 diff --git a/reflex/components/radix/themes/base.pyi b/reflex/components/radix/themes/base.pyi index d7ee29801ee..34af32b5541 100644 --- a/reflex/components/radix/themes/base.pyi +++ b/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 diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py index 3cca265e606..9ee68d345ed 100644 --- a/reflex/constants/installer.py +++ b/reflex/constants/installer.py @@ -123,4 +123,5 @@ class Commands(SimpleNamespace): DEV_DEPENDENCIES = { "autoprefixer": "10.4.14", "postcss": "8.4.31", + "postcss-import": "16.1.0", }