Use tailwind typography plugin by default (#3593)

Co-authored-by: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
reflex-dev · Sep 24, 2024 · 2c4310d · 2c4310d
1 parent 2883e54
commit 2c4310d
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/reflex/components/core/html.py b/reflex/components/core/html.py
@@ -40,7 +40,7 @@ def create(cls, *children, **props):
         given_class_name = props.pop("class_name", [])
         if isinstance(given_class_name, str):
             given_class_name = [given_class_name]
-        props["class_name"] = ["rx-Html", *given_class_name]
+        props["class_name"] = ["rx-Html", "prose", *given_class_name]
 
         # Create the component.
         return super().create(**props)

diff --git a/reflex/config.py b/reflex/config.py
@@ -194,7 +194,7 @@ class Config:
     cors_allowed_origins: List[str] = ["*"]
 
     # Tailwind config.
-    tailwind: Optional[Dict[str, Any]] = {}
+    tailwind: Optional[Dict[str, Any]] = {"plugins": ["@tailwindcss/typography"]}
 
     # Timeout when launching the gunicorn server. TODO(rename this to backend_timeout?)
     timeout: int = 120

diff --git a/tests/components/core/test_html.py b/tests/components/core/test_html.py
@@ -19,7 +19,7 @@ def test_html_create():
     assert str(html.dangerouslySetInnerHTML) == '({ ["__html"] : "<p>Hello !</p>" })'  # type: ignore
     assert (
         str(html)
-        == '<div className={"rx-Html"} dangerouslySetInnerHTML={({ ["__html"] : "<p>Hello !</p>" })}/>'
+        == '<div className={"rx-Html prose"} dangerouslySetInnerHTML={({ ["__html"] : "<p>Hello !</p>" })}/>'
     )
 
 
@@ -37,5 +37,5 @@ class TestState(State):
     )
     assert (
         str(html)
-        == f'<div className={{"rx-Html"}} dangerouslySetInnerHTML={{{str(html.dangerouslySetInnerHTML)}}}/>'  # type: ignore
+        == f'<div className={{"rx-Html prose"}} dangerouslySetInnerHTML={{{str(html.dangerouslySetInnerHTML)}}}/>'  # type: ignore
     )