Arbitrary Values are not being applied

[rockchalkwushock]

I am building out a simple todo app with LiveView and the Tailwind module. I am injecting a hex color value into my HEEX template and using it with Tailwind's new arbitrary value feature:

<li class="flex-1 border flex items-center border-red-500">
    <span class={"h-8 w-8 bg-[#{list.color}] after:content-[' '] before:content-[''] rounded-full"}></span>
    <span class="text-xl"><%= list.name %></span>
  </li>

Code from repository

In the DOM I can see the value is parsed correctly bg-[#34ba56]; however there is no color rendered and when looking at the classes applied to the node there is no bg class being applied. I checked the issues on Tailwind and found nothing and then tested the arbitrary values feature in the online playground with the same version of Tailwind I am currently using in the project 3.0.12. This does work in that playground, you can see an example here.

When looking at the DOM the class is present as:

.bg-\[\#bab123\] {
  --tw-bg-opacity: 1;
  background-color: rgb(186 177 35 / var(--tw-bg-opacity));
}

I am thinking that the underlying templating engine is likely escaping the the value but I am not entirely sure 😬. For now I am just going to apply the value to the style attribute.

<li class="flex-1 border flex items-center border-red-500">
    <span class={"h-8 w-8 after:content-[' '] before:content-[''] rounded-full"} style={"background-color: #{list.color}"}></span>
    <span class="text-xl"><%= list.name %></span>
  </li>

[chrismccord]

Tailwind does not support dynamic class names as the compiler is matching on full names. See the docs here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

It likely works in the playground because it has different handling than the cli watcher. You need to generate the full name like the example in the docs. In your specific example since the names themselves are dynamic (list.color), I would simply set the background via a style attribute. Thanks!