Is it possible to prefix --tw CSS variables?

[htor]

I'm building a component library with TW, using the prefix: 'mylib-' option in tailwind.config to prefix all CSS classes so they don't collide with the CSS of consumer of my library. However, including @tailwind base will set unprefixed CSS variables on every element:

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
/* etc. */

This is problematic since I don't want to mix up my variables with consumers variables. They might be overridden by consumer and inadvertently change my library defaults.

I would instead want something like:

:root {
  --mylib-tw-border-spacing-x: 0;
  --mylib-tw-border-spacing-y: 0;
  --mylib-tw-translate-x: 0;
/* etc. */

Is this possible?

I could skip including @tailwind base but then several utilities start breaking like, transform- which depend on --tw-translate-x: 0 being set.  

[htor]

I made this manual workaround using postcss-replace in my project.

postcss.config:

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-replace': {
      pattern: /(--tw|\*, ::before, ::after)/g,
      data: {
        '--tw': '--mylib-tw', // Prefixing
        '*, ::before, ::after': ':root', // So variables does not pollute every element
      }
    }
  },
}

Would be best if TW provided a way to do this itself, though

[luizov]

Yup, the prefix option currently does not affect the preflight/base layer and there is no built-in functionality in tw. From what I've read your workaround seems to be the best method for now. A simpler solution might be to disable Preflight and manually add the changed CSS to your styles. That also means manually updating it though. Good news is that it shouldn't change often if at all.

[chirayuk]

Would this continue to work after upgrading to tailwindcss v4?