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.
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.
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.
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?”