How to fix Tailwind Vue3 dynamic class issue (grid col)

While using Vue3 with Vite, tailwind is great tool in order to manage all style. Thanks to great infrastructure of Vite, tailwind can work efficiently.

So, sometimes we set classes dynamically to manage part’s style.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Especially while looping this item, it might cause inconsistency. It may not work. To fix the issue, we have to specify class explicitly.

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you want to move this logic to script side, you can use computed with this code block.

<script>
export default {
  name: 'Component',
  computed: {
     gridClass() {
      return `text-red-${this.color}`;
    },
    /**
    * return {number}
    */
    color() {
      // your logic to compute color
      return 600;
    },
  }
}
</script>

In this short article, We shared solution to fix tailwind vue3 dynamic class issue (grid col) and don’t hesitate to give your feedbacks and share your experience with us.

You can follow updates in software development here.

Reference:

https://tailwindcss.com/docs/content-configuration#dynamic-class-names