Merge 1e42ee0663 into 98f50811f9

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

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

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

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

reflex/app.py

@@ -1291,8 +1291,6 @@ class App(MiddlewareMixin, LifespanMixin):
                     "content", constants.Tailwind.CONTENT
                 )
                 _submit_work(compiler.compile_tailwind, config.tailwind)
-            else:
-                _submit_work(compiler.remove_tailwind_from_postcss)
 
             # Wait for all compilation tasks to complete.
             compile_results.extend(

reflex/compiler/compiler.py

@@ -515,25 +515,6 @@ def compile_tailwind(
     return output_path, code
 
 
-def remove_tailwind_from_postcss() -> tuple[str, str]:
-    """If tailwind is not to be used, remove it from postcss.config.js.
-
-    Returns:
-        The path and code of the compiled postcss.config.js.
-    """
-    # Get the path for the output file.
-    output_path = str(get_web_dir() / constants.Dirs.POSTCSS_JS)
-
-    code = [
-        line
-        for line in Path(output_path).read_text().splitlines(keepends=True)
-        if "tailwindcss: " not in line
-    ]
-
-    # Compile the config.
-    return output_path, "".join(code)
-
-
 def purge_web_pages_dir():
     """Empty out .web/pages directory."""
     if not is_prod_mode() and environment.REFLEX_PERSIST_WEB_DIR.get():

reflex/constants/installer.py

@@ -191,9 +191,8 @@ class PackageJson(SimpleNamespace):
         "universal-cookie": "7.2.2",
     }
     DEV_DEPENDENCIES = {
-        "autoprefixer": "10.4.20",
+        "@tailwindcss/postcss": "4.0.4",
         "postcss": "8.5.1",
-        "postcss-import": "16.1.0",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.

reflex/constants/style.py

@@ -7,7 +7,7 @@ class Tailwind(SimpleNamespace):
     """Tailwind constants."""
 
     # The Tailwindcss version
-    VERSION = "tailwindcss@3.4.17"
+    VERSION = "tailwindcss@4.0.4"
     # The Tailwind config.
     CONFIG = "tailwind.config.js"
     # Default Tailwind content paths

tests/integration/test_tailwind.py

@@ -10,7 +10,7 @@ from reflex.testing import AppHarness
 
 PARAGRAPH_TEXT = "Tailwind Is Cool"
 PARAGRAPH_CLASS_NAME = "text-red-500"
-TEXT_RED_500_COLOR = ["rgba(239, 68, 68, 1)", "rgb(239, 68, 68)"]
+TEXT_RED_500_COLOR = ["oklch(0.637 0.237 25.331)"]
 
 
 def TailwindApp(