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

Hi all,

the class phx-no-feedback:hidden is applied correctly in the DOM but I got no style for it in the css.
Should I add something special in the tailwind config to generate the css for that class?

The LV docs says:
Now, any DOM container with the phx-feedback-for attribute will receive a phx-no-feedback class in cases where the form fields has yet to receive user input/focus. Using new CSS rules or tailwindcss variants allows you errors to be shown, hidden, and styled as feedback changes.

Which is not helpful. Maybe the LV docs could link to the relevant part in the Tailwind docs?
Or maybe this should work OOTB and I just have to adapt my configuration.

Thank you

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.

1 Like

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.

1 Like

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.

2 Likes

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.