Defining "root" element

[jackall3n]

I have a React component that's injected into an existing page (using a Chrome extension). I'd like to style that component without affecting the page that it's being injected into.

Using tailwind, is there a way to isolate the styles so that only the root component is affected by the tailwind styles? I believe at the moment setting the directives (@tailwind base; etc) are reseting browser defaults for the entire page, is there a way to configure this so that they're only applied to a particular "root" element?

[wongjn]

If you are building via PostCSS, you could have a PostCSS plugin that runs after Tailwind that scopes every rule.

[jackall3n]

Hey @wongjn,

Do you have an example of this working with the tailwind directives?

I've attempted to use tailwindcss/nesting (a wrapper of postcss-nested) and updated the CSS to

#custom-root {
    @tailwind base;
}

@tailwind components;
@tailwind utilities;

But the terminal throws a warning Nested @tailwind rules were detected, but are not supported. and the styles are misconfigured in the HTML (they're still nested, which is of course is not supported)

[wongjn]

Leave CSS as the default:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then in postcss.config.js (or wherever the PostCSS configuration is):

const SCOPE = '.foo';

module.exports = {
  plugins: [
    require('tailwindcss'),
    {
      postcssPlugin: 'my-custom-scoper',
      Rule(rule) {
        rule.selectors = rule.selectors.map(selector =>
          /^(body|html|:root)/.test(selector)
            ? selector.replace(/^(body|html|:root)/, SCOPE)
            : `${SCOPE} ${selector}`
        );
      },
    },
  ],
};

[jackall3n]

Thanks @wongjn

Although I couldn't get your implementation working exactly, it did point in me in the right direction. My final solution was to use postcss-scopify:

export default {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
    
    // Use the 'postcss-scopify' package
    "postcss-scopify": "#my-custom-root-id",
  },
};

[jackall3n]

Although postcss-scopify did help me in this situation, I wanted a bit more control.

So I created a postcss plugin called postcss-scope.

It allows you to scope an entire css file, including the tailwind directives. But it also allows you to specify files to ignore & allows you to override the selector per file.

This is useful in my case because I'm developing a Chrome extension that injects a component into existing pages, but also has an extension popup and it's own page. In this case I was able to allow tailwind to reset styles globally.

[sametcodes]

Hi Jack, this helped me a lot. I'm building a chrome extension as well and have used postcss-scope, it works awesome. But it causes tailwindcss-animate breaking. Have you came across the same issue? I'm digging, but couldn't find any potential solution so far.

[jackall3n]

I'm glad it helped you @sametcodes! How does it break it specifically?

[sametcodes]

I solved the issue, the problem was with @keyframes rules. The plugin doesn't ignore such rules, and it outputs like this:

@keyframes pulse {
  #scopeselector 50% {
    opacity: .5;
  }
}

And this was breaking animations. I see ignoreRules and ignoreFiles in the interface, but they do nothing with configurations in the javascript side.

We can consider having an update on the npm module. I would love to send PR if it is open source!

[jackall3n]

Oh great, a PR would be very welcome. I can see that I've forgotten to add the git url to the npm package, but the repo is here if you're like to submit your solution: https://github.com/jackall3n/postcss-scope

[reciosonny]

This is the only plugin that worked for me when using tailwind in my chrome extension. Great job! Saved me a lot of headache.