Some CSS classes not working as expected with Tailwind JIT

[onmax]

Hey, I am new to this library so probably I am doing wrong but I don't what. Here is my problem:

First of all, I am using Tailwind JIT mode.

I am also using the rich text select with same classes as the docs and multiple option activated. In this config, we have for example the following property props.fixedClasses.selectButtonTag being one the classes bg-blue-500 (or any other, it's just for the explanation). I am not using that class anywhere else in the project so what I ended up with something like this:

The selected options have white background because the bg-blue-500 has not been found. Screenshot of the inspector:

The thing is that I am not using bg-blue-500 anywhere else in the project, but if I use bg-gray-800 which I am using in other parts, then the button has the background color (but others classes like m-0 are not loading because same reason, I am not using them in other parts):

[nikuscs]

In this case i would recommend adding the JS files of vue-tailwind and also your custom setup/classes to the tailwind ignore list. This way tailwind JIT is able to read them and include them in your bundle.

[MFredX]

@igerslike, can you elaborate further on this? I'm having the same issue

[nikuscs]

just add vue tailwind dir ( node modules ) and your own class settings js file ( in case you have one ) to the jit safe/whitelist path@MFredX , also please make sure your using a vanilla webpack or whatever your using to compile your js.

[MFredX]

@igerslike thanks for your reply.

Realised that my app is actually not in JIT mode and my issue is different.

I am just having trouble using this library with my existing default Tailwind css setup as it overwrites the Vue-tailwind CSS