Overriding Tailwind CSS Classes in VueJS Components

Example Scenario: Consider a Card.vue component with default Tailwind CSS styling.

<template>
  <div class="bg-gray-200 p-4 rounded">
    <!-- Card content -->
  </div>
</template>

When attempting to change the background color in different instances, the default style is not overridden:

<Card class="bg-blue-500"></Card> <!-- Expected to be blue, but remains gray -->

Solution: Prefix the Tailwind classes with ! when using the component to force override.

Implementation:

1. No Change in Card.vue: Keep the component as it is.

2. Usage with ! Prefix: Add the ! prefix to your Tailwind class when you use the component. This tells Tailwind to prioritize this class over others:

<Card class="!bg-blue-500"></Card> <!-- Now it will be blue -->

What I'm building

Delegate tasks. Get software.

Give Vroni a GitHub issue, bug report, spec, or rough idea. It reads the repo, plans the change, writes code, runs checks, and works toward a review-ready pull request.

Take a look at vroni.com