apply hover class to a button with tailwind and vue 3 computed function

Question

hi guys i am trying to apply a hover class to a button as follows :

<div class="tw-m-3">
    <button
        class="tw-bg-white tw-text-gray-800 tw-text-sm  tw-font-semibold tw-rounded tw- 
                border-b-2  hover:tw-text-white tw-shadow-md tw-py-2 tw-px-3 tw-inline-flex 
                 tw-items-center tw-group btn"
        :class="[ 'hover:' + FnColor]">
        <i class="fa-thin fa-envelopes-bulk group-hover-[.btn]:tw-text-white fa-lg tw-py-2"> 
         </i>
        <span class="tw-ml-2 group-hover-[.btn]:tw-text-white">{{ FnColor }}</span>
    </button>
</div>

but it doesn't apply when hovering the FnColor variable is a computed that depends on a props that is passed to the component.

const {btnText,btnColor} = defineProps({
        btnText: {
           type: String,
           default: ''
        },
        btnColor: {
           type: String,
           default: 'info',
           required: true,
         }
})

const FnColor = computed(() => {
    switch (btnColor) {
        case 'primary':
          return 'tw-bg-[#2A91FF]';
        case 'secondary':
          return 'tw-bg-[#2AB1FF]';
    }
 });

if you can help me I would appreciate it very much

Answer 1

Try to put the hover in the switch cases to be scanned correctly by tailwind compiler :

const FnColor = computed(() => {
    switch (btnColor) {
        case 'primary':
          return 'hover:tw-bg-[#2A91FF]';
        case 'secondary':
          return 'hover:tw-bg-[#2AB1FF]';
    }
 });

then :

:class="FnColor">