iam

iam

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

Marked As Solved

Ankhers

Ankhers

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.

Also Liked

LostKobrakai

LostKobrakai

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.

Ankhers

Ankhers

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.

AlchemistCamp

AlchemistCamp

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

Last Post!

AlchemistCamp

AlchemistCamp

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.

Where Next?

Trending in Questions Top

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
tj0
I’ve been following the steps here for the upgrade from 1.6 to 1.7 and it has gone relatively smoothly all the way till the phoenix_view ...
New
cgraham
Hi! What is currently the best library/method for parsing text and tabular data out of PDF files in Elixir or Erlang?
New
stefanchrobot
Hi, I need a way to handle data migrations in my application. I found an article by @wojtekmach about manual migrations: Automatic and ma...
New
stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
kip
Localize is the next generation localisation library for Elixir. Think of it as ex_cldr version 3.0. The first version will be released ...
New
webofbits
Squid Mesh is an open source workflow automation runtime for Elixir applications. It is aimed at Phoenix and OTP apps that want to defin...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
kip
In 2021 I started a new library called Tempo with the objective of modelling time as a set of intervals - not as instants. In 2022 I gave...
New

We're in Beta

About us Mission Statement