Variables not being read after loading tailwind inside a container

[shivankacker]

What version of Tailwind CSS are you using?

v4.1.4

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

Vite v6.2.6

What version of Node.js are you using?

For example: v22.14.0

What browser are you using?

Chrome (Arc)

What operating system are you using?

macOS

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue

I am trying to import tailwind inside a container, as we are using multiple versions of tailwind through a plugin system. (module federation)

This is how I am importing tailwind

.plugin-container {
  @import "tailwindcss";
}

Which seems to work fine, except that tailwind variables are not working after build.
When I checked the css file that got built, I see

@layer theme{
.plugin-container :root,.plugin-container :host{........

which seems to be causing this issue, as .plugin-container :root is invalid. Removing the :root here makes everything work fine.