Tab Custom Background Color

[juliswer]

Hi there,
I was looking for the way to set a custom background to a tab because in the documentation DaisyUI says:
<a role="tab" className="tab tab-active [--tab-bg:yellow] [--tab-border-color:orange] text-primary">Tab 2</a>

where the assignement is made on [--tab-bg:yellow]. My question is:

How can I set a custom background such us: bg-gray-900 | bg-[--alt-black] | bg-[#262629].

Thanks a lot

cheers.

[juliswer]

never mind, i just found it xd

this is the way if someone has the same question: [--tab-bg:#262629]

[ryuheechul]

In my case I was looking for a way to use the bg-base-200 for both the content and the (lifted) tab.

Here is the example code from the doc page.

<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 1
  </div>

  <input
    type="radio"
    name="my_tabs_2"
    role="tab"
    class="tab"
    aria-label="Tab 2"
    checked="checked" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 2
  </div>

  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
    Tab content 3
  </div>
</div>

But what it looks like it should work (as below) doesn't work for the tab but for content.

-   <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
+   <input type="radio" name="my_tabs_2" role="tab" class="tab bg-base-200" aria-label="Tab 3" />
-   <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+   <div role="tabpanel" class="tab-content bg-base-200 border-base-300 rounded-box p-6">
      Tab content 3
    </div>

However taking a look into how dayui is implemented, I found a way to do it like below.

-   <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 3" />
+   <input type="radio" name="my_tabs_2" role="tab" class="tab [--tab-bg:var(--fallback-b2,oklch(var(--b2)))]" aria-label="Tab 3" />
-   <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
+   <div role="tabpanel" class="tab-content bg-base-200 border-base-300 rounded-box p-6">
      Tab content 3
    </div>

So using [--tab-bg:var(--fallback-b2,oklch(var(--b2)))] (a lower level knob) instead of bg-base-200 for the tab worked for me.