Page variables and Tailwind

[steppa]

I use Tailwind for one of my sites. I want to place the cover image as a background image, but somehow it is not detected by Tailwind styles. Here’s how I am doing it (with a main image and fallback image)

{{- with or (.Resources.GetMatch "featured.jpg") (resources.Get "fallback.jpg") }}
<div class="w-full bg-cover bg-center bg-no-repeat bg-[linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)),url({{ .RelPermalink }})]">
{{ end }}

Adding resources.ExecuteAsTemplate "style.css" . to the stylesheet in the header does not work either. But defining the image and its styles inline with styles="" works

style="
  background-image: linear-gradient(
  rgba(0,0,0,0.4),
  rgba(0,0,0,0.5)
  ),
  url('{{ .RelPermalink }}')
"

I am avoiding inline styles due to Content Security Policy, but is there a possible way to get the initial method to work?

[steppa]

Or is it possible to run Hugo’s code before the CSS is generated by Tailwind?

[bwintx]

I do something similar to this — also for the sake of the CSP — in some of my image-handling shortcodes, such as hugo_site/imgh.html at main · brycewray/hugo_site · GitHub. The code adds a new, uniquely named* class on the fly and then assigns it to the image’s div. Perhaps you can adapt this approach to what you’re wanting to do.

* The name comes from applying md5 to the image file name, as you’ll see by looking earlier in the code than that line-specific URL above.

[regis]

Hello!

This looks like Tailwind 3 to me, are you using Tailwind 3 with Hugo?

If so are you 100% this is the correct syntax for a bg arbitrary values? Also could you show us the HTML produced by the above code.

As always a minimal repo to share would be great

[steppa]

Thank you all. I found an alternative of using text overlayed on images

Tailwind Play