Is it possible to instruct Vue to prioritize the inherited class over others?

Question

Is it possible to instruct Vue to prioritize the inherited class over others?

I have a situation in my component where I need Vue to disregard the existing class and instead use the inherited class, but only if it is of the same type as the inherited class. Let me illustrate with an example:

Consider a button component like this

MyButton.vue

<button class="text-sm font-roboto justify-center text-red-500">
  <slot></slot>
</button>

In my project, I want to use the MyButton component but override the classes justify-center and text-red-500 with my own, like so:

<MyButton class="justify-start text-gray-100">click me</MyButton>

This should result in the following button being rendered:

<button class="text-sm font-roboto justify-center text-red-500 justify-start text-gray-100">
  click me
</button>

The issue arises when HTML prioritizes the class justify-center over justify-start. I wish for Vue to intelligently handle Tailwind classes, recognizing that if it originally had justify-center and now I provide justify-start, it should replace rather than add them both.

This behavior should extend to all Tailwind classes – replacing rather than adding original text-...., font, color, shadow, etc., classes with the new ones.

Therefore, the desired output would be:

<button class="text-sm font-roboto justify-start text-gray-100">
  click me
</button>

html css vue.js vuejs3 tailwind-css

Answer 1

Answer №1

After much perseverance, I was able to achieve my goal with the help of an external tool called windtail-fusion

<template>
    <button :class="buttonStyle">
        <slot></slot>
        <i class="text-base text-gray-400 font-normal">
        class="{{ buttonStyle }}"</i>
    </button>
</template>

<script setup lang="ts">
    import { computed, useAttrs } from 'vue'
    import { windtailFusion } from 'windtail-fusion'

    const attrs = useAttrs()

    const buttonStyle = computed(() => {
        return windtailFusion('font-bold text-3xl justify-center text-red-500 ', attrs.class)
    })
</script>

<script lang="ts">
    export default {
        inheritAttrs: false
    }
</script>

Answer 2

After much perseverance, I was able to achieve my goal with the help of an external tool called windtail-fusion

<template>
    <button :class="buttonStyle">
        <slot></slot>
        <i class="text-base text-gray-400 font-normal">
        class="{{ buttonStyle }}"</i>
    </button>
</template>

<script setup lang="ts">
    import { computed, useAttrs } from 'vue'
    import { windtailFusion } from 'windtail-fusion'

    const attrs = useAttrs()

    const buttonStyle = computed(() => {
        return windtailFusion('font-bold text-3xl justify-center text-red-500 ', attrs.class)
    })
</script>

<script lang="ts">
    export default {
        inheritAttrs: false
    }
</script>

Answer 3

Answer №2

From my perspective, you have two choices:

When it comes to alignment, color, and so on, you can set props with the default classname values:

props: {
  alignment: 'start',
  // other props
},

Then link these props to the CSS class and apply them accordingly.

Another option is to utilize vue directives:

Vue.directive('tailwind', {
  bind: function(el, binding, vnode) {
    let currentClasses = el.classList;
    for (let i = 0; i < currentClasses.length; i++) {
      let className = currentClasses[i];
      if (className.startsWith('text-') || className.startsWith('justify-') || className.startsWith('font-')) {
        el.classList.remove(className);
      }
    }
  },
  update: function(el, binding, vnode) {
     let newClasses = binding.value.split(' ');
    for (let i = 0; i < newClasses.length; i++) {
      let className = newClasses[i];
      if (className.startsWith('text-') || className.startsWith('justify-') || className.startsWith('font-')) {
        el.classList.add(className);
      }
    }
  }
});

This directive can now be implemented as follows:

<button v-tailwind="class" class="text-sm font-roboto justify-center text-red-500">
  <slot></slot>
</button>

<MyButton class="justify-start text-gray-100">click me</MyButton>

Answer 4

From my perspective, you have two choices:

When it comes to alignment, color, and so on, you can set props with the default classname values:

props: {
  alignment: 'start',
  // other props
},

Then link these props to the CSS class and apply them accordingly.

Another option is to utilize vue directives:

Vue.directive('tailwind', {
  bind: function(el, binding, vnode) {
    let currentClasses = el.classList;
    for (let i = 0; i < currentClasses.length; i++) {
      let className = currentClasses[i];
      if (className.startsWith('text-') || className.startsWith('justify-') || className.startsWith('font-')) {
        el.classList.remove(className);
      }
    }
  },
  update: function(el, binding, vnode) {
     let newClasses = binding.value.split(' ');
    for (let i = 0; i < newClasses.length; i++) {
      let className = newClasses[i];
      if (className.startsWith('text-') || className.startsWith('justify-') || className.startsWith('font-')) {
        el.classList.add(className);
      }
    }
  }
});

This directive can now be implemented as follows:

<button v-tailwind="class" class="text-sm font-roboto justify-center text-red-500">
  <slot></slot>
</button>

<MyButton class="justify-start text-gray-100">click me</MyButton>

Is it possible to instruct Vue to prioritize the inherited class over others?

Answer №1

Answer №2

Similar questions

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Retrieving information from a form containing a list of numerous values

Issue with displaying or loading Google font in NextJS website

Having trouble with Vue 3 Composition API's Provide/Inject feature in Single File Components?

"Unraveling the Mystery: In Javascript Vue, what is the secret behind the origin of the variable 'e' found in the function

Vue.js encountered a problem with chokidar stating: "Error: EBUSY: resource busy or locked, lstat 'C:hiberfil.sys'"

Tips for keeping a div element at the top of the page

Obtaining font resources within a Vue application on a WordPress page template

The styled components can create identical CSS classes with varying conditions

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

Ways to animate a main element independently of its counterpart's animation

Artwork expanding incorrectly on HTML canvas

The most sophisticated method for creating a 2x2 grid of divs

Adjusting image width using jQuery

Adjust Vuetify v-alert property dynamically

Accessing JavaScript results in PHP

changing the css transformation into zoom and positioning

Listening for position changes using jQuery events

Can you provide tips on leveraging CSS as a prop for a Vuetify v-tab component?

What is the best way to implement page navigation within Nuxt?