One way you could write this is:
<div class={“#{if @published, do: "bg-green", else: "bg-red"} text-white text-small border-grey"}>...</div>

Although there may be a clearer way.

Another way to do this:

<div class={["text-white", "text-small", "border-grey"] ++ [(if @published, do: "bg-green", else: "bg-red")]}>...</div>

That is, using a list instead of string interpolation. This is however neither more concise nor better than @axelson’s solution, it’s just different. It may appeal to you if you prefer to use a list for your classes.

A more elegant way would be if LV allowed things like this:

<div class={%{"bg-green": @published, "bg-red": !@published, "text-small": true ...}}>...</div>

Like some front-end frameworks (e.g. Vuejs) already do. I was told that Surface supports this notation, though I haven’t tested it. I’m sure that LiveView will catch up at some point

Great, thanks so much @axelson and @trisolaran , both approaches are big improvements. Thanks again!