Loop through objects in template and set each elements background image to object's ImageField value using tailwind css

Question

From the tailwind docs, to set the background image to an 'Arbitrary value':

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

In my template, I am trying to loop through a list of Artist objects and build cards for each one. Artist objects all have a profile_picture attribute which is an ImageField:

{% for artist in artists  %}
  <div class="bg-[url('{{artist.profile_picture.url}}')]">
    <a href = "{{artist.profile_picture.url}}">Link to Image</a> <!-- put this here to make sure the url is correct and this does take me to the image -->
    <h1>Some text</h1>
  </div>
{% endfor %}

And this is not applying the background image. I can confirm the url is correct because I have inspected the page:

  <div class="bg-[url('/media/images/artists/headshot.jpeg')]">
    <a href = "/media/images/artists/headshot.jpeg">Link to Image</a>
    <h1>Some text</h1>
  </div>

and visited http://127.0.0.1:8000/media/images/artists/headshot.jpeg where I do see the image. Does anyone know what's going on here? For now I'm just going to use <div style="background-image:url('{{artist.profile_picture.url}}')"> but I am curious as to why this isn't working. Thanks for any help.

Edit: Using Tailwind version 3.0.24