Categories
TailwindCSS Vue

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 -->
    

Leave a Reply

Your email address will not be published. Required fields are marked *