gradient stop css vars get optimized away

[Hades32]

It seems like the plugin is interfering with Tailwind's optimization process. This is my situation

Host css:

:host {
  @apply inline-flex items-center gap-2;
  /* without these explicit references, these two variables are missing */
  dummy-prop-1: var(--tw-gradient-from-position);
  dummy-prop-2: var(--tw-gradient-to-position);
}

In a functional component that gets used by the host I have this: class="bg-gradient-to-b from-0% from-[#F1CA06] to-100% to-[#C65E18] bg-clip-text text-transparent"

Without the workaround in the host CSS, this breaks and renders the text as just transparent. Debugging in the Chrome dev tools shows that the two CSS variables are simply missing...

My stencil config just has this

  plugins: [
    tailwind({
      minify: true,
    })
  ],