avatar-group background color

[Primdahl26]

Hello! I am having a small issue changing the background color of the avatar-group, and maybe someone could help me!

My issue is that the background I have in the image div is neutral, but it does not seem like i can change the background of the avatar-group, no matter what I try. It seems that this defaults to the base-100. Any idea how to change this to use neutral, so that i dont end up with a circle of base-100 around the provider images?

<div class="card compact bordered w-auto transition duration-500
                   bg-neutral ease-in-out transform m-1 shadow-md hover:opacity-50">
  <a href="{mediaIdToUrlConverter(media.id)}">
      <figure>
          <img
              src="{LOW_RES_IMG_URL}{media.poster_path}"
              alt="{media.title}"
          />
      </figure>
    <div class="-space-x-4 avatar-group">
        {#each media.specific_providers as provider}
            <div class="avatar">
                <div class="w-12 h-12">
                    <img
                        src="{IMG_URL}{provider.logo_path}"
                        alt="{provider.name}"
                    />
                </div>
            </div>
        {/each}
    </div>
  </a>
</div>

Any help is appreciated, thanks! 😅

[flip111]

Try to go into your web developer tools and find out which CSS rules overwrites the rules you are putting on the element directly. You can then uncheck this rule to see if your wanted color takes effect so you know you found the right rule.

For fixing it you can try to put ! in front of your class https://tailwindcss.com/docs/configuration#important-modifier i can't tell you if that is the right fix though as you need to inspect the generated css first to understand from which css rules effects are applied.

EDIT: i just found that if you go into developer tools you can easily see for a specific rule which css rules where affecting that without searching for it. See screenshot below

[saadeghi]

Fixed. update to latest version and you can use custom border colors.
examples: https://play.tailwindcss.com/4ki9LCtY0l