In Vue, when your component template has some classes and you also add some classes to this component in the parent, the classes will be merged together.

parent component

<template>
  <Table class="py-2"></Table>
</template>

child component Table.vue

<template>
  <table class="border-solid border-2 border-sky-500">
    <!-- ... -->
  </table>
</template>

classes from the parent and child will be merged together

<template>
  <table class="border-solid border-2 border-sky-500 py-2">
    <!-- ... -->
  </table>
</template>

A collection of Vue, Nuxt and Vite tips, tricks and good practices.