Gridsome: dynamic class bindings not working [Purging issue]

[tonyketcham]

Describe the problem

In Gridsome, the following code is not working as expected (where isFalse equals false):

 <h2
   class="mb-2 text-4xl font-medium"
   :class="[isFalse ? 'text-gray-50' : 'text-gray-700']"
 >

You'd expect text-gray-700 to be applied in this case, however, the element just inherits the parent text color without applying the class. I tried in both compiled and interpreted modes with rebuilding the app and clearing browser cache but was met with unstable behavior where about 1 in 10 times the dynamic class would be applied.

How I've installed WindiCSS

// gridsome.config.js
...
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-windicss-preprocess',
          options: {
            config: 'tailwind.config.js', // tailwind config file path OR config object (optional)
            compile: true, // false: interpretation mode; true: compilation mode
            globalPreflight: true, // set preflight style is global or scoped
            globalUtility: true, // set utility style is global or scoped
            prefix: 'windi-', // set compilation mode style prefix
          },
        },
      ],
    });
  },
...

Browser: Brave - Version 1.20.103 Chromium: 88.0.4324.152 (Official Build) (64-bit)

Semi-workaround

~~Using vue-windicss-preprocess in combination with gridsome-plugin-tailwindcss makes dynamic class bindings work just fine. I haven't found any issues with that setup besides when trying to use the windi/plugins, which spits out a bunch of errors where it's searching for functions in tailwind and PostCSS instead of Windi CSS, leading to the app not building.~~ UPDATE: trying to reproduce this from scratch, the gridsome-plugin-tailwindcss now isn't working alongside Windi as a workaround