How to Override Tailwind CSS Classes in a Reusable VueJS Component?

Tailwind CSS is a widely-used CSS framework that adopts a utility-first approach by supplying a collection of predetermined classes to design HTML elements. In VueJS, we can create reusable components across our applications. However, we may need to override the default Tailwind classes in our VueJS component to enable a specific design or layout. This article will explore different approaches to override Tailwind CSS classes in a reusable VueJS component.

Syntax

To override Tailwind CSS classes in a VueJS component, we can use the following syntax

<template>
  <div class="my-component">
    <div class="original-tailwind-class"></div>
  </div>
</template>

<style>
.my-component .original-tailwind-class {
  /* Override Tailwind CSS properties here */
}
</style>

In the above syntax, we first define our VueJS component and wrap our content inside a <div> element with a custom class name my-component. Inside this component, we use the original Tailwind CSS class original-tailwind-class to style a child element. We then use the custom class name my-component to target this child element and override the Tailwind CSS properties inside the <style> section.

Approaches to Override Tailwind CSS Classes in a Reusable VueJS Component

We can use different approaches to override Tailwind CSS classes in a reusable VueJS component. Some of these approaches are:

1. Use inline styles: We can use inline styles to override the Tailwind CSS classes in VueJS component. This approach is simple but can be cumbersome if we need to override multiple properties.

<div style="background-color: red;">

2. Use scoped styles: We can use scoped styles to override the Tailwind CSS classes in the VueJS component. This approach is more organized and allows us to target specific elements within our component.

<div :class="{ 'bg-red-500': isActive }">

3. Use deep selectors: We can also use deep selectors to override the Tailwind CSS classes in our VueJS component. This approach is powerful but can also be prone to specificity issues.

<style scoped> .btn >>> .bg-blue-500 { background-color: red; } </style>

Explanation using inline styles

Here are examples of overriding Tailwind CSS classes in a reusable VueJS component.

<template>
  <div class="my-component">
    <div class="bg-blue-500 text-white px-4 py-2 rounded-md">Click me</div>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  methods: {
    handleClick() {
      console.log("Button clicked");
    },
  },
};
</script>

<style>
.my-component div {
  background-color: red;
  cursor: pointer;
}
</style>

• Line#1-5: We have a simple VueJS component that contains a child <div> element with the Tailwind CSS classes bg-blue-500 text-white px-4 py-2 rounded-md which give it a blue background, white text, rounded corners & some padding.
• Line#18-23: We use inline styles to override the background color to red and add a cursor style to make it look like a button.
• Line#7-16: When the button is clicked, it logs a message to the console.

Explanation using scoped styles

In this code example, we will be using scoped style attribute on specific elements.

<template>
  <div class="my-component">
    <div class="bg-blue-500 text-white px-4 py-2 rounded-md">Click me</div>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  methods: {
    handleClick() {
      console.log("Button clicked");
    },
  },
};
</script>

<style scoped>
.my-component >>> div {
  background-color: red;
  cursor: pointer;

In this code snippet, we use scoped styles to override the background color of the child <div> element. We use the >>> deep selector to target the child element within our component.

Explanation using deep selector

In this approach, we will use deep selectors to override the default Tailwind CSS classes within our VueJS component. Here is a coding example:

<template>
  <div class="btn">Welcome to Algoideas!</div>
</template>

<style scoped>
.btn >>> .bg-blue-500 {
  background-color: red;
  cursor: pointer;
}
</style>

• Line#1-3: A simple VueJS component with a <div> element that has a custom CSS class btn.
• Line#5-10: We are using scoped styles to override the background color to red and add a cursor style to make it look like a button. When the button is clicked, it logs a message to the console.

Note the use of the >>> deep selector in the scoped style to target the child <div> element and override its properties. This approach is more organized than using inline styles as it allows us to target specific elements within our component without affecting the global styles.