Scoped CSS for embedded unable to build

[justindra]

Hi,

So using Tailwind v4.0.3, we have a widget that is embedded in other people's websites.

In v3, we just set the following config and it works really well

const config = {
  important: '.cool-widget',
};

export default config;

Here's the way to embed the widget with that:

<div class="cool-widget">
    <p class="bg-red-400">This can be styled with tailwind</p>
</div>

<p class="bg-red-400">This should not be styled</p>

So in v4, I've done the following:

/* Make sure that the components imported are also used */
@source "../node_modules/@company/base-components";

/* Set dark mode to be based on a class instead of a media query */
@custom-variant dark (&:where(.dark, .dark *));

@plugin "@tailwindcss/forms";

.cool-widget {
  @import 'tailwindcss';
}

But because the source, custom-variant and plugin can't be nested, it's not working. What is the best way to do this?

[wongjn]

At least in Tailwind Play (with some slight modification for the theme), it works: https://play.tailwindcss.com/5XmyakedS5?file=css

Perhaps provide a remotely-hosted git repository please?

[justindra]

Your example does not include the @source directive, which was the main issue. Nothing from that path can be styled with a scope.

I managed to get it to work by using the @config directive and falling back to using that for the time being. But would be good to know how to migrate to have the same effect as setting important: ".cool-widget".

I'll see if I can get a repo going as an example.