Phoenix - Tailwindcss wont produce CSS classes

Phoenix Forum Questions / Help
1

Hello,

I have a problem in my project i can’t seem to solve. Tailwind will not produce the classes i write. So when i change a class to something i have not used before, no class will be generated and shipped to the frontend.

The hot-reloading is working, as the application updates when i change something and save.

Here is my config.exs

config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

config :tailwind,
  version: "3.2.7",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css),
    cd: Path.expand("../assets", __DIR__)
  ],
  email: [
    args: ~w(
        --config=tailwind_email.config.js
        --input=css/app.css
        --output=../priv/static/assets/email_app.css),
    cd: Path.expand("../assets", __DIR__)
  ]

tailwind.config.js:

let plugin = require('tailwindcss/plugin');

module.exports = {
  content: ['./js/**/*.js', '../lib/*_web.ex', '../lib/*_web/**/*.*ex'],
  ... 
}

dev.exs:

config :oceanconnect, OceanconnectWeb.Endpoint,
  http: [ip: {0, 0, 0, 0}, port: System.get_env("PORT") || 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  secret_key_base: "iri+y1gpDKiCiXXuj6LYuJh3Fpb0x0rlZvikPZ0iSJFmA2Lrx8W4G0f55nVt1RDR",
  watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
    tailwind: {Tailwind, :install_and_run, [:email, ~w(--watch)]},
    sass: {
      DartSass,
      :install_and_run,
      [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
    }
  ]
1 Like
2

What happens if you switch to version: 3.2.4 and then run mix tailwind.install?

1 Like
3

Nope, still doesn’t work.

I run mix asset.deploy it properly builds the classes.

"assets.deploy": [
        "esbuild default --minify",
        "sass default --no-source-map --style=compressed",
        "tailwind default --minify",
        "tailwind email --minify",
        "phx.digest"
      ],
4

Something that stands out is that you’ve got a bunch of watchers defined in your dev.exs, all which produce CSS. I wonder if there are some conflicts between them?

What happens if you remove the last two and just leave in the first one? If that works - it’s at least narrowed down the issue to a config problem.

5

Not that either.

6

Which class are you trying to have generated and how/where do you define it?

7

When you say it “won’t produce” them are we talking not existing when you use inspect? Or you aren’t able to see the characteristics you were expecting to produce?

If you use core-components remember that they have built in classes that might conflict with what you are trying to achieve.

I don’t use taliwind, but have found most of my CSS issues tend to come down to the core-components, to the point where I’ve kind of just nuked my core-components and left skeletons.

8

Any any markup. If i write <div class="pr-11" /> the class pr-11 is not produced and shipped with the app.css file. The file is a *.html.heex file.

9

I mean that the classes aren’t shipped with the app.css file.

I do use core-components, but this is outside of that. I does not work any place.

10

Can share more of your tailwind.config.js? It’s a shot in the dark here but do you have any custom classes defined? In the past when I’ve not been able to figure out why classes aren’t getting picked up it’s because I forgot the extend namespace when adding to theme which blows away all the default stuff.

11

So the solution was to delete my assets folder. I think the hash wasn’t properly updated after updating tailwind to a newer version

3 Likes
12

I’ve had the same problem before, it happened after I was testing out the assets.deploy task and then running the server in dev mode. The tailwind and esbuild versions weren’t changed at all in this case.

The fix was to run phx.digest.clean --all and also delete the base app.css and js files, basically the same as nuking the whole folder.

2 Likes