@theme directive adds all css variables to the :root. Is there a way to change it?

[jqueryisamonad]

Hi. I want to scope all tailwind related styles to the .tailwind container.

There is two problems with that:

1. @theme directive adds all variables to the :root. Is there a way to change this default behavior?

2. preflight.css contains global styles (:host, html, body). May be fixed with scoped import. But in that case all styles in global selectors will be missed. So I need to copy them and apply to the my container. Is there better way to do this?

@layer base {
  .tailwind {
    @import "tailwindcss/preflight.css";
  }
}

[fjolliton]

I'm interested by this too.

I'm building a microfrontend (federation) for my company, and the CSS must absolutely be scoped, so :root is not appropriate, yet @theme should be retained.

[fjolliton]

In the meantime, we are using a pass to rewrite the CSS to replace :root with a custom class (and discard :host, but that's optional):

// In vite.config.js configuration:
...
    css: {
        postcss: {
            plugins: [
                {
                    postcssPlugin: 'replace-root-selector',
                    Once(root) {
                        root.walkRules(rule => {
                            rule.selectors = rule.selectors.flatMap(selector =>
                                selector.match(/^:root\b/)
                                    ? [selector.replace(/^:root/, '.acme-prefix')]
                                    : selector.match(/^:host\b/)
                                      ? []
                                      : [selector],
                            );
                        });
                    },
                },
            ],
        },
    },
...