Phoenix 1.6 and Tailwinds: Trouble regenerating priv/static/assets/app.css

Questions / Help
, ,
1

Novice User for Phoenix, Tailwinds and Elixir.

ISSUE: Can’t get priv/static/assets/app.css to regenerate after I make changes to assets/css/app.css or when I remove priv/static/assets/app.css altogether.

I have just upgraded to Phoenix 1.6.6. I managed to get my app working again after making all of the necessary changes, but the css formatting was gone. So I followed the Pragmatic Studio instructions on how to upgrade Tailwinds to work with 1.6.6. Formatting is still wonky.

At first, it could see everything I had in assets/css/app.css, but I was getting compilation errors that it couldn’t see the css files I was importing in app.css (e.g. phoenix.css and other import files listed below):

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./phoenix.css";
@import "./custom.css";
@import "./components/buttons.css";

So I started trying to modify those paths, but I noticed that the priv/static/assets/app.css file NEVER changed. So then I tried to delete
priv/static/assets/app.css to force it to regenerate, but nothing is happening. And of course now my app is choking because there is no app.css at all. Sigh.

I’m using mix phx.server to rebuild. Should I be using another command to make it rebuild the static assets? Is there an esbuild command to make that happen?

Here are the versions of things I’m using:

 defp deps do
    [
      {:bcrypt_elixir, "~> 2.0"},
      {:phoenix, "~> 1.6.6"},
      {:phoenix_ecto, "~> 4.4"},
      {:ecto_sql, "~> 3.7"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_live_view, "~> 0.17.1"},
      {:floki, ">= 0.27.0", only: :test},
      {:phoenix_html, "~> 3.0"},
      {:phoenix_live_reload, "~> 1.3.3", only: :dev},
      {:phoenix_live_dashboard, "~> 0.6.2"},
      {:telemetry_metrics, "~> 0.6"},
      {:telemetry_poller, "~> 0.5"},
      {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
      {:gettext, "~> 0.11"},
      {:jason, "~> 1.2"},
      {:plug_cowboy, "~> 2.5"},
      # {:phx_gen_auth, "~> 0.7.0", only: [:dev], runtime: false},
      {:nimble_csv, "~> 1.1.0"},
      {:geo, "~> 3.4"},
      {:poison, "~> 4.0"},
      {:geo_postgis, "~> 3.4"}
    ]
  end

Here is my dev.exs endpoint watchers configuration:

watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
2

Should I be using another command to make it rebuild the static assets? Is there an esbuild command to make that happen?

When you are using tailwindcss, esbuild isn’t used for building your css anymore. You probably removed the import "../css/app.css" from you app.js.

Your npx watcher / tailwindcss should build the app.css.
You could try to run it manually:

$ cd assets
$ npx tailwindcss --input=css/app.css --output=../priv/static/assets/app.css --postcss
1 Like
3

Please take a look at:

1 Like
4

I second that. Please note that in this case the docs in README.md are much better than the ones on hexdocs.pm.

1 Like
5

It would be good if hexdocs could add (optionaly) the contents of readme.md to the initial page of each package and bellow the dynamic stuff. having to maintain those 2 things is always more work.

not to mention if the repo has wikis.

6

There’s a PR to fix this for this repo: Generate docs using the README.md by vermaxik · Pull Request #24 · phoenixframework/tailwind · GitHub

7

@Narven @stefanchrobot Thank you for that link and the tip to look at the Readme.md file. I’m going to run through all of that information and see if it gets my app running again.

I’m really new to Phoenix and I have not come from Rails. I struggle at times with finding documentation. In general, I try to start with Hexdocs but I don’t always get enough information there. Then I search this forum and do google searches. I try to only post questions when I’ve exhausted a search.

To install Phoenix 1.6, I used the instructions from this github link by @chrismccord. I ran into issues and then started to read through the comments (which answered a lot of the problems I was running into). That’s where I found the link to the Tailwind instructions by Pragmatic Studio. I didn’t see that link you posted, but maybe I missed it.

In general … should I be looking at documentation on Github more than hexdocs? Is github more up-to-date?

8

Ahhhh. I did remove that line and I remember Mike from pragmatic studio mentioning that esbuild was being “uninvited” from the build party. And I saw that npx line in dev.exs but didn’t make the connection that you have to change into the assets directory. Now that npx code in my code makes sense to me. So much to learn! Thank you!

2 Likes
9

For the bigger packages (Phoenix, Ecto, etc.), look at hexdocs for documentation. For small packages or if the documentation is missing, I take a peek into the repo.

Happy to hear that you’ve figured this out!