So finally I have this solution.

assets/css/app.css

.box {
   height: 20px;
   width: 20px;
   border-radius: 5px
 }

html.heex

<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 ">
 <div class= "pl-5 box" style={"background-color:#{site_config.color}"}>
  <%= site_config.color %>
 </div>
</td>

not the entire style tag, look at how it is in <tr id={"site_config-#{site_config.id}"}>

The answer by Thomas is correct, but since you are using Tailwind, you do not need the separate style tag. You can use class={"w-8 h-8 bg-[#{site_config.color}]"} for example. Tailwind allows you to deviate from the predefined classes using the -[] syntax. Just make sure the “color” is in the correct syntax; bg-[#cccccc], your variable then needs to hold #cccccc,

That would be bad, the [] syntax only works with the JIT and tailwind wouldn’t be able to parse it correctly because the value would only be known at runtime.