Using Tailwind 4 for embedded widget

[hocrattot]

I am working on a vanilla js widget that will be embedded on partners' websites.

I intended to use tailwind 4 for my styling part but after scoping preflight and configuring my build with a prefix, my first tests showed on major issue : my widget css is affected by the present stylesheets of the host website. More precisely by the reset css used on that website.
The reason is pretty simple : all my tailwind 4 css is layered css (the default tailwind layers) while the host website css is unlayered css thus has precedence on my tailwind css.

Is there a proper way to handle this if I want to use tailwind 4 ?

[hocrattot]

Ok, I think I have found a simple way : I just remove some layers to build my css without them

[inakiabt]

Do you have an example? I'm looking to do the same

[wongjn]

Replace

@import "tailwindcss";

With

@import "tailwindcss/theme.css";
@import "tailwindcss/preflight.css";
@import "tailwindcss/utilities.css";