From ef0bbfb2d99c42a6c4abbf0b7f7d9763032c07c1 Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Thu, 6 Feb 2025 13:12:36 -0800 Subject: [PATCH 1/4] upgrade to tailwind 4 --- reflex/.templates/web/postcss.config.js | 6 ++---- reflex/.templates/web/styles/tailwind.css | 7 +++---- reflex/constants/style.py | 4 +++- reflex/utils/prerequisites.py | 1 + 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/reflex/.templates/web/postcss.config.js b/reflex/.templates/web/postcss.config.js index 1e7129835..483f37854 100644 --- a/reflex/.templates/web/postcss.config.js +++ b/reflex/.templates/web/postcss.config.js @@ -1,7 +1,5 @@ module.exports = { plugins: { - "postcss-import": {}, - tailwindcss: {}, - autoprefixer: {}, + "@tailwindcss/postcss": {}, }, -} +}; diff --git a/reflex/.templates/web/styles/tailwind.css b/reflex/.templates/web/styles/tailwind.css index e1c383749..0e487a7ef 100644 --- a/reflex/.templates/web/styles/tailwind.css +++ b/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"; \ No newline at end of file diff --git a/reflex/constants/style.py b/reflex/constants/style.py index 5b31ce9b3..88e37f3dc 100644 --- a/reflex/constants/style.py +++ b/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",) diff --git a/reflex/utils/prerequisites.py b/reflex/utils/prerequisites.py index 6c6d34923..d9cef206e 100644 --- a/reflex/utils/prerequisites.py +++ b/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, From 6d4b4bc17c822f45d32fb91e7d2a18a62021c06e Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Thu, 6 Feb 2025 13:36:53 -0800 Subject: [PATCH 2/4] fix tests --- reflex/compiler/compiler.py | 2 +- tests/integration/test_tailwind.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index c2a76aad3..11726535d 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -526,7 +526,7 @@ def remove_tailwind_from_postcss() -> tuple[str, str]: code = [ line for line in Path(output_path).read_text().splitlines(keepends=True) - if "tailwindcss: " not in line + if "@tailwindcss" not in line ] # Compile the config. diff --git a/tests/integration/test_tailwind.py b/tests/integration/test_tailwind.py index eb0fde759..819a5349a 100644 --- a/tests/integration/test_tailwind.py +++ b/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( From 620c2b3379aa857990365e037b00d80d8f5a8a94 Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Thu, 6 Feb 2025 13:43:27 -0800 Subject: [PATCH 3/4] always include tailwindcss/postcss --- reflex/app.py | 2 -- reflex/compiler/compiler.py | 19 ------------------- reflex/constants/installer.py | 3 +-- 3 files changed, 1 insertion(+), 23 deletions(-) diff --git a/reflex/app.py b/reflex/app.py index a3d0d8e10..344b498d9 100644 --- a/reflex/app.py +++ b/reflex/app.py @@ -1134,8 +1134,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. for future in concurrent.futures.as_completed(result_futures): diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py index 11726535d..c73e91842 100644 --- a/reflex/compiler/compiler.py +++ b/reflex/compiler/compiler.py @@ -514,25 +514,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(): diff --git a/reflex/constants/installer.py b/reflex/constants/installer.py index 0a89240b3..32eac62ff 100644 --- a/reflex/constants/installer.py +++ b/reflex/constants/installer.py @@ -192,7 +192,6 @@ 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", } From 1e42ee06639d4bfbddf2b21c9f602a87bb44c9c8 Mon Sep 17 00:00:00 2001 From: Khaleel Al-Adhami Date: Thu, 6 Feb 2025 13:46:35 -0800 Subject: [PATCH 4/4] remove postcss from running command --- reflex/constants/style.py | 2 -- reflex/utils/prerequisites.py | 1 - 2 files changed, 3 deletions(-) diff --git a/reflex/constants/style.py b/reflex/constants/style.py index 88e37f3dc..129f40c9d 100644 --- a/reflex/constants/style.py +++ b/reflex/constants/style.py @@ -14,5 +14,3 @@ class Tailwind(SimpleNamespace): 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",) diff --git a/reflex/utils/prerequisites.py b/reflex/utils/prerequisites.py index d9cef206e..6c6d34923 100644 --- a/reflex/utils/prerequisites.py +++ b/reflex/utils/prerequisites.py @@ -1204,7 +1204,6 @@ 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,