I am using the Tailwind PrimeVue ProgressBar UI component.

I want to dynamically change the bar colour based on the progress bar’s value.

So I created a method that takes the value and returns the correct background class colour. Using the PrimeVue Pass Through I am setting that class on the component.

It works because the bar colour is changing, but my code is replacing ALL the bar classes, not just the background class. This is causing other issues such as alignment etc which are now gone.

To avoid those problems how do I selectively replace or override only the bg-* class?

I don’t want to have to manually define all the base classes plus my custom class because that defeats the purpose of having presets.

<template>
  <Panel>
    <div class="flex flex-col gap-4">
      <ProgressBar :value="50" />
      <ProgressBar
        :value="70"
        :pt:value:class="
          getScoreBackgroundColor(70)
        "
      />
    </div>
  </Panel>
</template>

<script setup lang="ts">
// Get progress bar color based on the score
const getScoreBackgroundColor = (score?: number) => {
  // If no score is provided, return medium-grey
  if (!score) {
    return "grey-medium";
  }

  // Else, return the appropriate color based on the score
  if (score <= 50) {
    // Very Bad
    return "bg-red-medium";
  } else if (score > 50 && score <= 66) {
    // Bad
    return "bg-orange-medium";
  } else if (score > 66 && score <= 83) {
    // Good
    return "bg-amber-medium";
  } else {
    // Very good
    return "bg-green-medium";
  }
};
</script>