Tailwind base CSS classes not being scoped

[tholub99]

My tailwind project is built to be consumed by other apps. Because of that I do not want any tailwind classes to apply to any scope outside of a specified class (in this case .ui)

For the most part, this is achieved with the tailwindcss-scoped-preflight package which I can use to apply a strategy to any rules encountered in the preflight. However, there is a bit of code at the end of the @tailwind base which does not get processed and it looks like this

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

I need this to be generated as .ui *, .ui ::before, .ui ::after like other sections of @tailwind base are when using the scoped preflight package. From what I can tell this section of the generated CSS is dynamic compared to other parts of base which is what causes the problem, but if there is a solution besides manually editing this output it would be extremely helpful.

(there is also a ::backdrop section right below this in the CSS output that has the same issue)

Thanks

[wongjn]

You could consider running Tailwind as a PostCSS plugin, which would then allow you to have another PostCSS plugin that can run after it. This plugin could then modify the rules in question to add the scope to the selectors.