Nested tabs style override

[cesarIsysDev]

I'm encountering a problem, which I'm unsure if it's a bug or misuse of the tool, so I decided to ask first before reporting the error. In the layout of an app I'm building, on one of the pages I have a tab inside another tab. I noticed that if the parent tab has the 'border' style, some of the styles are passed down to the child tab. However, this behavior doesn't happen with other tabs and is completely undesirable because each one should have its proposed theme. I've created a minimal example to demonstrate it, and I'm also sending my package.json. I'm using Next.js.

const Home = () => {
  return (
    <>
      <div className="tabs tabs-border">
        <input
          type="radio"
          name="my_tabs_outer"
          className="tab"
          aria-label="Tab 1 - Externa"
        />
        <div className="tab-content bg-base-100 border-base-300 p-6">
          <div className="tabs tabs-lift">
            <input
              type="radio"
              name="my_tabs_inner"
              className="tab"
              aria-label="Sub-Tab 1"
            />
            <div className="tab-content bg-base-100 border-base-300 p-6">
              Conteúdo Interno 1
            </div>

            <input
              type="radio"
              name="my_tabs_inner"
              className="tab"
              aria-label="Sub-Tab 2"
              defaultChecked
            />
            <div className="tab-content bg-base-100 border-base-300 p-6">
              Conteúdo Interno 2 (Padrão)
            </div>

            <input
              type="radio"
              name="my_tabs_inner"
              className="tab"
              aria-label="Sub-Tab 3"
            />
            <div className="tab-content bg-base-100 border-base-300 p-6">
              Conteúdo Interno 3
            </div>
          </div>
        </div>

        <input
          type="radio"
          name="my_tabs_outer"
          className="tab"
          aria-label="Tab 2 - Externa"
          defaultChecked
        />
        <div className="tab-content bg-base-100 border-base-300 p-6">
          Conteúdo Externo 2 (Padrão)
        </div>

        <input
          type="radio"
          name="my_tabs_outer"
          className="tab"
          aria-label="Tab 3 - Externa"
        />
        <div className="tab-content bg-base-100 border-base-300 p-6">
          Conteúdo Externo 3
        </div>
      </div>
    </>
  );
};

export default Home;

package.json

{ "name": "testecomponent", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build --turbopack", "start": "next start" }, "dependencies": { "daisyui": "^5.3.7", "next": "15.5.6", "react": "19.1.0", "react-dom": "19.1.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.15", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "tailwindcss": "^4.1.15", "typescript": "^5" } }

[cesarIsysDev]

Please, can someone help me? I also created a tailwind play: https://play.tailwindcss.com/E8y36zT8Af

[pdanpdan]

1. There are some styles that bleed (I'll make a PR - changes are in play)
2. Do not use fractional border - every browser will do something else

https://play.tailwindcss.com/tZMqSCS50m

[cesarIsysDev]

Thank you so much, very nice! <3

[pdanpdan]

@saadeghi

• do we want to support only direct hierarchies (.tabs > .tab, .tabs > .tab-content)
• or do we want to support lax hierarchies (.tabs >|:not(.tabs) .tab, .tabs >|:not(.tabs) .tab-content)

[saadeghi]

If possible, second one. So people can use it anywhere.

tabs > a grid > another tabs > card > another tabs 

[pdanpdan]

ok

[pdanpdan]

I have a working implementation that fully support any structure: https://play.tailwindcss.com/0zq6o5UQ5X?file=css
The only problem is that firefox does not support @scope.
For firefox we would need to duplicate all code.

The other solution is to limit all children to 1/2 levels (.tabs > .tab|.tab-content and .tabs > :not(.tabs) > .tab|.tab-content)

[saadeghi]

Thank you @pdanpdan

I think it's too soon to use scope.
And duplicating everything is not efficient. Tab is already the largest component in size 🙈

What would happen to the 3rd nested tabs if we limit then to 2 levels? Is it like current behavior?

BTW: currently tabs rely on a lot of CSS variables because of CSS specificity of modifiers. Maybe we can get rid of them and use layers instead and in that case maybe we won't have style leaking issue.

[pdanpdan]

Ok. I'll try then to refactor tabs to see if I find a better solution. I'll open a PR to further discuss there.