Introducing a new frontend stack (Vue3, Tailwind CSS) into an already established application.

The old stack has dependencies which includes CSS classes that conflict with Tailwind.

The end goal is to use only Vue and TailwindCSS, so I don't want to use a prefix during development as it won't be necessary... but I need to support both old and new stack until I am able to entirely remove the old CSS.

I am aware of using the prefix property in the TW config (prefix: 'tw-',) but this means the source .vue files will need to use the prefix.

Am I able to tell Vue during build only (using Vite) to add a prefix to all classes, then likewise pass a rule to Tailwind during build only to add the prefix (but not required during development)?

I saw a similar question where an answer mentioned if this existed in TW, then how would TW know which to convert and which not to... I understand this but in my scenario I have no other plugin.

I've had a brief look at postcss-prefixer but not sure if that's what I need...

I guess I can just use the TW prefixer as it's not the end of the world, but feels dirty for my end goal...

CodePudding user response：

What you want to achieve does not seem possible - how would Vite (or Vue template compiler) know which CSS classes are Tailwind's and which are coming from your old stack, if they have the same name? The only way to avoid such collissions is to use the prefix in TW config.
It might look dirty (to you) - but I always use the prefix even when Tailwind is the only CSS framework in the project because in the future there could be a third-party dependency which has conflicting CSS classes.

Perhaps the cleanest solution would be to completely refactor your application and switch entirely to Tailwind by removing/converting all the old CSS.