Tailwind not pullling utility classes from heex file

wwaldner

I followed this guide to setup Tailwind on a new phoenix application. Install Tailwind CSS with Phoenix - Tailwind CSS

In dev, any changes to my index.html.heex file automatically builds a new app.css, just like I would expect. However, any classes specified in the heex file are not being processed by tailwind, hence the styles do not work. How do I go about troubleshooting this? It is as if it can’t find, or is not looking for the classes in the heex file, yet the tailwind.config.js is setup to process the heex templates.

tailwind.config.js

let plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
    plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
    plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
  ]
}

index.html.heex

<h1 class="text-3xl font-bold underline bg-orange-200">
  Hello world!
</h1>

config.exs

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

dev.exs

...
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)]}
]
...

13 comments

/phoenix #troubleshooting

0 1799 13

2024-01-07 17:25:59 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

tcoopman

Your tailwind config should probably also accept *.heex

Post #1

Sebb

this line does (should) do that.

Maybe there are templates in folders that do not match this glob, maybe _web part missing in the path or a file directly below xxx_web.

For example these template would not be processed by the tailwind compiler.

lib/templates/my-template-tailwind-does-not-see.heex
lib/web/templates/my-other-template-tailwind-does-not-see.heex
lib/my_web/my-other-other-template-tailwind-does-not-see.heex

Post #2

tcoopman

Didn’t spot the * before the ex on the last line

Post #3

wwaldner

Indeed this is strange. I can run mix tailwind default and it processes the css classes as you would expect. It seems like it is not correctly triggered when a change to the files is detected. My page is reloading when I make a change to the HTML. The browser reloads and the updated HTML is shown, just not the css gubins. Running the mix tailwind default manually does make the classes available in the app.css.

Post #4

tcoopman

Can you verify that the watcher is actually running?

Post #5

wwaldner

Not sure how to verify that…except that I do know that live-reload happens.

Post #6

TunkShif

tailwindcss cli watch mode is not working properly in the latest version, so any file changes won’t trigger a css rebuild, see this issue: CLI watch mode not working correctly when using visual studio · Issue #9667 · tailwindlabs/tailwindcss · GitHub
The current workaround is to switch back to version 3.1.8.

Post #7

arrowsmith

Did anyone figure out a fix for this? I’m experiencing the same problem and it’s driving me nuts - the tailwind watcher isn’t detecting changes to my app code, so my app.css doesn’t get rebuilt. I have to restart my server every time I add a TW class that isn’t already in app.css.

Downgrading to 3.1.8 didn’t work for me.

If I’m not mistaken then when TW detects changes I should see something like this in my server output:

Rebuilding...

Done in 673ms.

But I only ever see this when the server starts up. It never rebuilds again.

arrowsmith 2 minutes ago

I’m using Phoenix 1.7.9, Elixir 1.15.5, tailwind 0.2.2 (Hex package) and 3.3.5 (actual Tailwind lib). My tailwind.config.js is unchanged from the one generated by mix phx.new.

Anyone have any ideas?

Post #8

sodapopcan

How about your config/config.exs Tailwind config? Did you happen change anything there? Have you run mix tailwind default after making changes? Just throwing out ideas here, I’m really not sure what could be wrong.

Post #9

arrowsmith

Turns out that I can reproduce this in a minimal Phoenix app:

mix phx.new tailwind_test
cd tailwind_test

That generates an app with Phoenix 1.7.10, tailwind hex package 0.2.2, and tailwind version 3.3.2 as specified in config/config.exs.

Now if I run mix tailwind default --watch and open priv/static/assets/app.css, I can see the generated tailwind utility classes. But if I change an .ex or .heex file in lib/tailwind_test_web, tailwind doesn’t rebuild. The only way I can force it to rebuild is to ctrl+C the mix tailwind default process and start it again.

Post #10

Load more posts (3 remaining)