Class detection in custom Vue directive

[ronaldtb]

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Vite v6.3.5

What version of Node.js are you using?

v22.14.0

Describe your issue

We have bought TailwindUI / Plus for our company and are very happy with the components and templates.
One of the best features is the ability to copy and paste the code for quick prototyping.

But now we are working in a Vue 3 project where we need to use a prefix (for example @import "tailwindcss" prefix(cst); and this breaks the ability to quickly copy and paste the code, because we need to manually prefix all the classes.

To workaround this issue I was thinking about the following custom Vue directive:

const vTailwind = {
  mounted: (el: HTMLElement, binding: DirectiveBinding<string>) => {
    // Add prefixed classes to class list
    if (binding.value) {
      binding.value
        .split(' ')
        .map(v => 'cst:' + v)
        .forEach(v => el.classList.add(v));
    }
  }
}

This allows us to specify the classes without the prefix, like:

<div v-tailwind="'px-4 sm:px-6 lg:px-8'">

Unfortunately this breaks the class detection, because it requires the prefix to be included in the actual source file.

Is there maybe a solution available to handle this? For example being able to specify a source prefix and a separate build prefix?

[wongjn]

There's nothing like this at the moment, so converted to a feature request 👍