upgrade to tailwind 4

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/constants/style.py

@@ -7,10 +7,12 @@ 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
     CONTENT = ["./pages/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"]
     # Relative tailwind style path to root stylesheet in Dirs.STYLES.
     ROOT_STYLE_PATH = "./tailwind.css"
+    # Builtin dependencies
+    DEPENDENCIES = ("@tailwindcss/postcss",)

reflex/utils/prerequisites.py

@@ -1204,6 +1204,7 @@ def install_frontend_packages(packages: set[str], config: Config):
                 "add",
                 "-d",
                 constants.Tailwind.VERSION,
+                *constants.Tailwind.DEPENDENCIES,
                 *((config.tailwind or {}).get("plugins", [])),
             ],
             fallback=fallback_command,