tailwindcss and shadow dom not working well (--spacing)

[vdegenne]

What version of Tailwind CSS are you using?

For example: v4

What build tool (or framework if it abstracts the build tool) are you using?

For example: vite

What version of Node.js are you using?

For example: v23

What browser are you using?

For example: Chrome

What operating system are you using?

For example: Linux

Describe your issue

I mainly using tailwindcss to structure my layout (utilities), I've successfuly migrated from v3 to v4.
But there is a small issue, using @import 'tailwindcss'; works but --spacing is missing a default.

which makes all properties relying on this variable broken.

[wongjn]

Could you provide a reproducible example please?

[vdegenne]

Never mind, the problem occured because of shadow doms... I was binding the stylesheet transformed by tailwindcss to a custom element, but for some reasons --spacing was not accessible (is it because @layer are not working in custom elements?) but adding the same stylesheet to document.adoptedStyleSheets fixed the issue.

[vdegenne]

I still think that's a problem because the css variables should be available in the custom elements.

I think the issue is because it's using :root only and not :host (I may be wrong).

For those who wants to investigate/pin point the issue, I made a repository with minimal example: https://github.com/vdegenne/tailwindcss-4-vite-and-shadow-doms

(note: do not mind the repository name, the issue is not about vite)

[vdegenne]

Also, on my custom element the base layer is correctly applied:

why not the theme layer?

[vdegenne]

Ok so my first intuition turned out to be correct, the problem is that theme layer css variables are only available in :root scope. If I manually add:

@import "tailwindcss";

@layer theme {
  :host {
    --spacing: 0.25rem;
  }
}

Then it works, so :host should be added for tailwindcss defaults to also work in custom elements. It's a huge deal.

[vdegenne]

For now I'll use the snippet above, but if one of you devs see this thread I really think that this needs to be fixed.

[vincaslt]

There is also an issue that @property properties won't work from inside of shadowDOM - they get created on the document (I think) and don't propagate back to shadow dom. For instance, try adding border - it won't work out of the box, event though it should.

[hugo-vrijswijk]

It should be noted that this is not exclusive to --spacing. Any tailwind variable is inaccessible to the shadow dom at the moment. Meaning, all of tailwind v4 is broken inside web components/shadow dom.