Can't make phx-no-feedback:hidden work

You may nor may not be the same person that asked on IRC, so I will also answer here.

In a freshly generated Phoenix 1.7 application, there is a section in the tailwind.config.js file that has additional variants listed. I will just copy the relevant section here.

    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 &"])),

There are also more things in the config that may be worth looking at. So it may be worth generating a brand new project just to see what is there in case it is relevant to you.

Do you know where the actual source for those styles is? I’ve generated a new project to copy them from, but they don’t appear anywhere in the assets directory or in the deps directory for the Tailwind module.

To clarify, I’m on Phoenix LiveView 18.6 and using the same core components that ships with Phoenix 1.7.1 and Tailwind, but still stuck with Webpack due to some dependencies that aren’t don’t work well with ES Modules. I just need the CSS that’s injected by the Tailwind “phx-no-feedback” plugin.

This has to do with tailwind, not webpack/esbuild.

If you take the lines I used above and added them to your tailwind.config.js file in the plugins section you should also have access to these styles. If you are unsure, take a look at the freshly generated tailwind.config.js file and copy over the added parts to your projects config.

I could have elaborated a bit more. Due to the fact that the app has many tens of thousands of lines of SCSS, Bootstrap and Font Awesome, it’s very difficult to migrate to normal Tailwind setup. My planned path for that is to get everything migrated to ES 6 modules and then use Vite, which supports SCSS out of the box and is also very easy to use Tailwind with.

As of now, I’m managing Tailwind classes semi-manually and do not have a tailwind.config.js. This is why I asked where the actual phx-no-feedback styles were.

In that case you are going to need to look at the compiled app.css file that is output after being run through tailwind. That will have all of the styles that tailwind generates for you.

Are you sure there isn’t some kind of documentation or maybe a standalone repo for the plugin?

There isn‘t. The „plugins“ are a handful lines of js code in the tailwind.config.js, which for the most part tells tailwind how to scope css selectors to the presence or lack of presence of the classes liveview will add to inputs or paren dom nodes.

E.g. phx-no-feedback:hidden converts to

.phx-no-feedback.phx-no-feedback\:hidden,
.phx-no-feedback .phx-no-feedback\:hidden{
  …
}

as configured by

plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
…

The plugins make using tailwind in the context of liveview simpler, but the underlying css is not coupled to tailwind at all.

Ah, right. I see what the variant is doing now, thanks.

What I’m trying to figure out is what classes I should add to my templates to hide the appropriate fields. I guess the question I should have asked is, “for which classes or selectors should I hide so as not to show feedback for fields a user hasn’t interacted with yet?”

The solution was trivial! All I needed to add to my global scss file was:

.phx-no-feedback .phx-no-feedback\:hidden { display: none; }

There wasn’t any more complexity than that to how LV updates classes on tags inside of one with phx-feedback-for set.