CSS file is not being compiled

[nuno84]

Hello all, I am trying to use phoenix 1.7 with tailwind without the npm dependencies. I dont know why but the tailwind is not compiling and generating the css file even with a simple example project. Seems that the JS generation works ok. I am using VSCode on windows with WSL1:

Please take a look at the following commands:

$ elixir -v
    Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit]
    Elixir 1.15.0-dev (1c41021) (compiled with Erlang/OTP 24)

$ mix tailwind.install
    16:28:05.615 [debug] Downloading tailwind from https://github.com/tailwindlabs/tailwindcss/releases/download/v3.1.8/tailwindcss-linux-x64

$ mix archive.install hex phx_new 1.7.0-rc.0
$ mix phx.new counter --live
$ cd counter/
$ mix ecto.create
$ mix phx.server
    [info] Running CounterWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
    [info] Access CounterWeb.Endpoint at http://localhost:4000
    [watch] build finished, watching for changes...
    [info] GET /
    [debug] Processing with CounterWeb.PageController.home/2
      Parameters: %{}
      Pipelines: [:browser]
    [info] Sent 200 in 147ms
    [info] GET /assets/app.css
    **[debug] ** (Phoenix.Router.NoRouteError) no route found for GET /assets/app.css (CounterWeb.Router)**
        (counter 0.1.0) lib/phoenix/router.ex:482: CounterWeb.Router.call/2
        (counter 0.1.0) lib/counter_web/endpoint.ex:1: CounterWeb.Endpoint.plug_builder_call/2
        (counter 0.1.0) lib/plug/debugger.ex:136: CounterWeb.Endpoint."call (overridable 3)"/2
        (counter 0.1.0) lib/counter_web/endpoint.ex:1: CounterWeb.Endpoint.call/2
        (phoenix 1.7.0-rc.2) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
        (plug_cowboy 2.6.0) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
        (cowboy 2.9.0) /home/nuno/phoenix_projects/counter/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.9.0) /home/nuno/phoenix_projects/counter/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
        (cowboy 2.9.0) /home/nuno/phoenix_projects/counter/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
        (stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3

    [watch] build started (change: "js/app.js")
    [watch] build finished
    [debug] Live reload: priv/static/assets/app.js
    [debug] Live reload: priv/static/assets/app.js

Now the website loads but has no css. I then tried to force it:

$ mix assets.deploy
** (Mix) `mix tailwind default --minify` exited with 8

The code is here: github proj

Does anyone have an idea of the reason? May it be some issue with tailwind CLI and WSL1?

Thank you very much, any help is appreciated. Thank you for your work, this stack is quite awesome.

[nuno84]

As a follow up, I did the same thing in Windows directly and it works correctly, it downloads the tailwind exe and works fine. So it seems something is wrong with WSL1. I know that WSL1 is not a complete virtual machine, but it is way faster than WSL2. If someone finds it interesting, wants to dig further and need some help, I can help. As a side note, I was trying WSL1 because windows had some issues with some libraries but I guess I read somewhere that phoenix 1.7 (or some previous version) has some encryption libraries changed to make it more compatible with windows. I will give it a try again with windows. Thank you all

[notfelx]

Hi all,

I confirmed having the same issue on WSL1. Upgrading to WSL2 resolved the issue.

[yordis]

I did a clean install, and I am getting

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error [BrowserslistError]: Unknown version 110 of Edge <---------- HERE
    at Function.select (/snapshot/tailwindcss/node_modules/browserslist/index.js:1096:17)
    at /snapshot/tailwindcss/node_modules/browserslist/index.js:314:29
    at Array.reduce (<anonymous>)
    at resolve (/snapshot/tailwindcss/node_modules/browserslist/index.js:304:34)
    at browserslist (/snapshot/tailwindcss/node_modules/browserslist/index.js:406:21)
    at Browsers.parse (/snapshot/tailwindcss/node_modules/autoprefixer/lib/browsers.js:54:12)
    at new Browsers (/snapshot/tailwindcss/node_modules/autoprefixer/lib/browsers.js:42:26)
    at loadPrefixes (/snapshot/tailwindcss/node_modules/autoprefixer/lib/autoprefixer.js:106:20)
    at Object.prepare (/snapshot/tailwindcss/node_modules/autoprefixer/lib/autoprefixer.js:120:22)
    at /snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:149:39 {
  browserslist: true
}

That error is preventing the CSS from being compiled correctly.

I ran assets.build to confirm it is failing.

[yordis]

Changing from config :tailwind, version: "3.2.7", to config :tailwind, version: "3.3.2" fixed the issue for me

[mrcampbell]

I just hit this issue and I think the bigger issue isn't a tweak of the code - it is that my app is trying to install dependencies, at runtime, without my input, I can't stop it from trying, and because of my firewall policy, it's in a crash loop.

But! I found a fix because of some awesome error messages, so thanks peeps!

I had to do a rebuild because of a bad cache, and I suddenly now have this issue.

I'm able to install dependencies, but because of the security stuff, I need to do them manually, and so this ~is~ was a huge pain for me right now.

~Is there a way we can remove the installation from startup to mix deps.build perhaps? I tried running that and it didn't do the task of doing whatever it's trying to do.~ I see in the error message that there are a series of commands to run 🤦, but still it threw me for a loop. I wonder if the app should just cut out entirely instead of looping?

I'm sorry - I am very tired and should have gone to bed long ago, but Phoenix calls to me and I must build haha. I love you guys and this project, and am eager to help with this if I can!

EDIT:

Solution was spelled out in the error message:

This typically means we cannot reach the source or you are behind a proxy.
You can try again later and, if that does not work, you might:

  1. If behind a proxy, ensure your proxy is configured and that
     your certificates are set via the cacerts_path configuration

  2. Manually download the executable from the URL above and
     place it inside "_build/tailwind-macos-arm64"

  3. Install and use Tailwind from npmJS. See our module documentation
     to learn more: https://hexdocs.pm/tailwind

And note, you need to run mkdir _build/tailwind-macos-arm64 and place the binary INSIDE that folder, or the folder that matches the name of your error message/runtime.