Scoped Styling for Tailwind in Embedded Widgets

[doneumark]

Hello,

I am currently utilizing Tailwind CSS within a Chrome extension (using React, with Vite), specifically for a widget that embeds at the bottom of websites. However, I've observed that the Tailwind styles seem to influence not just my widget, but also the global styles of the websites it's embedded on. This results in unwanted style changes on the host website and leads to issues within my widget's appearance.

I'm seeking a method to restrict the scope of Tailwind's styles strictly to my widget component, ensuring no interference with the parent website. While I'm aware that an iframe could provide a solution, I'd prefer to find an approach that doesn't rely on it.

Any guidance on achieving this would be greatly appreciated.

Thank you in advance!

[wongjn]

If you rely on Tailwind preflight or other styles generated in the base or component layers, consider having a PostCSS plugin that runs after Tailwind CSS that scopes all rules to that of the widget. Otherwise, you could configure a prefix or important to attempt to avoid class name collisions.

[wongjn]

Using tailwind prefixes is less ideal because every class I write must have the prefix, which is kind of annoying. Can you elaborate more on "consider having a PostCSS plugin that runs after Tailwind CSS that scopes all rules to that of the widget"? How do I implement a thing like that?¹

Have the plugin be defined after Tailwind in the plugins object or array in postcss.config.js or equivalent.

Footnotes

1. https://github.com/tailwindlabs/tailwindcss/discussions/11922#discussioncomment-6858544 ↩

[doneumark]

Using tailwind prefixes is less ideal because every class I write must have the prefix, which is kind of annoying.
Can you elaborate more on "consider having a PostCSS plugin that runs after Tailwind CSS that scopes all rules to that of the widget"? How do I implement a thing like that?

[wongjn]

Replied at #11922 (reply in thread) to keep the reply chain together.

[doneumark]

Thanks for the help @wongjn !
Do you have some kind of example or even any pseudo snippet that can show me in more details what do you mean exactly? I'm kind of clueless on the postcss abilities.

[wongjn]

In postcss.config.js or similar:

module.exports = {
  plugins: {
    tailwindcss: {},
    // Add any config here instead of empty object if needed.
    'my-scoping-postcss-plugin': {},
  },
};

[doneumark]

I think I got it :)

"postcss-prefix-selector": {
      prefix: "#my-container-id",
      includeFiles: ["globals.css"],
      transform: function (prefix, selector, prefixedSelector) {
        if (selector.match(/^(html|body)/)) {
          return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
          // } else if (selector.match(/^\.(some-class-we-dont-want-to-scope|some-other-class-we-dont-want-to-scope)/)) {
          //   return selector;
        } else {
          return prefixedSelector;
        }
      },
    },

inside plugins in "postcss.config.js"