I have created a VueJS button component using TailwindCSS. My goal is to provide that button component with some base styles (using tailwindcss classes), with the option to override them when need be (again, using tailwind css classes).

For example, here is a simplified version of the Button component:

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

And here is an example of my using that component in another file:

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

The problem is that this only half-works. That is to say, bg-blue-600 does override the bg-green-500 that I set up as a default in Button.vue. But bg-red-600 does not override the background color (presumbably, because bg-red-600 comes earlier in the css source code.

As such, I am wondering how can I properly set this up? That is to say, how can I give the Button component some base styles (again, using tailwind css classes) while also providing the option to override those styles using tailwind css classes.

Thanks.