Use ! important operator infront of any class to override existing class.

The important option lets you control whether or not Tailwind’s utilities should be marked with !important. This can be really useful when using Tailwind with existing CSS that has high specificity selectors.

Explanation:

Tailwind in case of conflicts uses the latest className while styling (Not necessarily true all the time)

Example:

<div class="bg-black h-screen bg-green-600"></div>

Output:

The bg-black is overridden by bg-green-600.

How to get bg-black ?

Use ! operator infront of bg-black as !bg-black

<div class="!bg-black h-screen bg-green-600"></div>

Output:

See also : Override tailwind-css base classes

To use the initial:* variant, with defined zero specificity. Details are here:

Override Tailwind classes of a reusable Vue component without using props: https://dev.to/saifobeidat/override-tailwind-classes-of-a-reusable-vue-component-without-using-props-660

Arbitrary variants can be used to increase the specificity of the generated selector to allow later classes to always be applied.

In this case, use [&&]:bg-blue-600 for the class name to overwrite the style for bg-green-500. To overwrite it again later, you can use another class with an increased number of ampersands (&), e.g. [&&&]:bg-blue-700.

For special cases, the !important modifier can be applied to override nearly anything else. This can be done by adding ! in front of the class name, e.g. !bg-blue-600. Use this sparingly, as it can make styles difficult to maintain and modify later on.

For an explanation of why this occurs, see the Multiple Same CSS Classes issue.

The tailwind-unimportant plugin for Tailwind solves this problem. It adds a variant that reduces the specificity of the component classes so that they can be overridden.

// Button.vue

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

// index.vue

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

There's also the tailwind-merge, a JS library that will de-duplicate these clashing classes.

As a workaround, you can use props:

<!-- Button.vue -->
<template>
  <button :class="background + ' text-white py-2 px-4 rounded'">
    Click Me
  </button>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: "bg-green-500",
    },
  },
};
</script>

<!-- index.vue -->
<Button background="bg-red-600"></Button>
<Button background="bg-blue-600"></Button>

This is because your component attributes class on Button does not tickle down to the html button. To do this just bind the attributes to the child like so

<button v-bind="$attrs"...>

This will make all the attributes you specify on the Button (which are not props) bind to the html button.

That being said, I personally prefer making a button class using the @apply directive and reusing it across my project.

If you create a tailwind class using the @apply directive, you can add in !important to make it override the other color classes when used.

You will need to use the lang="postcss" attibute to use tailwind directives in a component.

<style lang="postcss">
.my-overriding-class{
    @apply bg-red-600 !important 
}

Tailwind-merge seems like the best answer

from my research and experience so far.

NOTE: I didn't build it in anyway, just discovered it through the Tailwind discord server.

Step 1: Install yarn add tailwind-merge

Step 2:

<template>
  <button class="text-white py-2 px-4 rounded" :class="twMerge('bg-green-500', $attrs.class)">
    Click Me
  </button>
</template>

<script setup>
import { twMerge } from 'tailwind-merge'
</script>

Whatever you want to be able to override put in the twMerge first argument string.

Then use how you'd expect, and you're done! ✅