Bind multiple classes to a single variable

Question

While using Tailwind with utility-first approach to css, I often find the need to bind multiple classes to a single variable.

For instance, to style an input form, I need to add border-red, color-red, etc if there is an error.

Is there a nice and elegant way to express this in Vue instead of writing v-bind:class="{ 'border-red': error, 'text-red': error }?

Answer 1

You can combine both classes into the same property:

:class="{ 'border-red text-red': error }"