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