Is it possible to insert Antlers tag in the middle of Class names?

Question

I have the following HTML with Tailwind classes to display a full screen header image in Statamic CMS:

<header class="w-full h-full bg-[url('/img/headers/robert-patient-blue-overlay.png')] bg-cover bg-center flex justify-center items-center">...</header>

and have been trying to replace /img/headers/robert-patient-blue-overlay.png with {{ header_image }} so that is can be edited in the CMS, but I'm not sure if it's possible.

using [url('"{{ header_image }}"')] doesn't work, nor does [url("{{ header_image }}")] or [url({{ header_image }})]... is it just not doable?

Thanks!

Answer 1

It's not doable. This is because Tailwind scans your source code as plain text, so it sees bg-[url({{ header_image }})] literally. Thus, it sees the strings bg-[url({{, header_image and }})] which are all invalid Tailwind classes.

As a work-around, you could consider using the style attribute instead like:

<header class="…" style="background-image: url({{ header_image }})">