Cannot run Tailwind CSS with Elixir Phoenix 1.8 project

Help
4

Hi, I just ran into this same issue, and found this solution to work for me:

TL;DR: Remove the Tailwind Mix package and configure Phoenix to use nix-installed tailwindcss + watchman for live CSS watching.

Same as you I added tailwindcss_4 to the shell, but I also added the watchman package, since we later have to modify the watch commands for phoenix to be able to use our nix version of tailwindcss.

This is my first post on the nixos discourse, so not completely sure what the normal way to answer is, but i will use some git diffs to show my solution.

You can remove this part:

--- a/config/config.exs
+++ b/config/config.exs
@@ -54,17 +54,6 @@ config :esbuild,
     env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
   ]
 
-# Configure tailwind (the version is required)
-config :tailwind,
-  version: "4.1.7",
-  project: [
-    args: ~w(
-      --input=assets/css/app.css
-      --output=priv/static/assets/css/app.css
-    ),
-    cd: Path.expand("..", __DIR__),
-  ]

Use tailwindcss and watchman directly to watch for css changes:

--- a/config/dev.exs
+++ b/config/dev.exs
@@ -26,7 +26,7 @@ config :project, Project.Endpoint,
   secret_key_base: "secret",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:project, ~w(--sourcemap=inline --watch)]},
-    tailwind: {Tailwind, :install_and_run, [:project, ~w(--watch)]}
+    tailwind: {System, :cmd, ["tailwindcss", ["--input=assets/css/app.css", "--output=priv/static/assets/css/app.css", "--watch"], [cd: File.cwd!()]]}
   ]

And remember to remove the tailwindcss mix package:

--- a/mix.exs
+++ b/mix.exs
@@ -53,7 +53,6 @@ defmodule CrmSirkusagio.MixProject do
       {:lazy_html, ">= 0.1.0", only: :test},
       {:phoenix_live_dashboard, "~> 0.8.3"},
       {:esbuild, "~> 0.10", runtime: Mix.env() == :dev},
-      {:tailwind, "~> 0.3", runtime: Mix.env() == :dev},
       {:heroicons,
        github: "tailwindlabs/heroicons",
        tag: "v2.2.0",
@@ -84,10 +83,10 @@ defmodule project.MixProject do
       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
-      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
-      "assets.build": ["tailwind project", "esbuild project"],
+      "assets.setup": ["esbuild.install --if-missing"],
+      "assets.build": ["cmd tailwindcss --input=assets/css/app.css --output=priv/static/assets/css/app.css", "esbuild project"],
       "assets.deploy": [
-        "tailwind project --minify",
+        "cmd tailwindcss --input=assets/css/app.css --output=priv/static/assets/css/app.css --minify",
         "esbuild project --minify",
         "phx.digest"
       ],
``
1 Like