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

---

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.

[philipp-spiess]

Hey! Do you mind adding a reproduction of your setup so others can take a look?

This piece of code you added does not appear to be valid CSS. @import must happen at the start of the document in CSS to be valid!

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

[shivankacker]

Thanks for pointing this out. Using imports this way do not work on a standalone vite project (generates the css, but does not import it), but for some reason works on plugins using @originjs/vite-plugin-federation.

https://github.com/ohcnetwork/care_scribe_fe is where we are using this.
I understand this might be the wrong way to do things, but can you point me towards the correct way of scoping tailwind to a container so that it does not affect anything outside it?

[philipp-spiess]

but can you point me towards the correct way of scoping tailwind to a container so that it does not affect anything outside it?

Ah, yep, you can do this by ejecting from the default imports and scoping the utility layer relying on CSS nesting, so instead of:

@import "tailwindcss";

You'd do:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

@layer utilities {
  .plugin-container { 
    @tailwind utilities;
  }
}

This will insert all utilities in the place where @tailwind utilities; is located which will be inside the utilities layer but also require a .plugin-container class in the parent tree!

[shivankacker]

This works, thanks a lot!