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 it possible to generate excel spreadsheets using a selection in Laravel?

Vue app showcasing array items through search upon button pressing

Transforming an unordered list to function similarly to a select input

Can floating elements be disregarded by block elements?

An easy guide on implementing the if control statement within a Jinja2 embedded HTML document

Ways to delete a tag with jQuery

Unique symbols within HTML tags

Presentation for a div's background image with the use of jQuery

Can you explain how I can use AJAX in HTML to change the text of a link once it has been clicked on?

Fill the next Thursday with JavaScript

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

Challenge with maintaining tab view data in Openui5

Editing the content of a div in real-time by dynamically updating the innerHTML

Unforeseen outcomes arise when toggling expansion in JavaScript

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

Arranging buttons in a row with Bootstrap 5

The background image is not displaying properly within a <span> tag

Conceal the ::before pseudo-element when the active item is hovered over

Unable to navigate through select2 dropdown if fixed div is present

Expand the dimensions of the file upload field to make it taller and wider