Components ​

Definition ​

A Component is your standard Vue-Component as you know and love it. There is nothing special to it other than its location and its usecases.

Components are located in /ui/components.

Merge CSS Classes ​

If you need to make your Components dynamic while using Tailwind, you might encounter the following issue:

<template>
    <div class="mb-2">
        <slot/>
    </div>
</template>

<MyComponent class="mb-4"/>
<!-- MyComponent still has a margin-bottom of 2 -->

This is because, as awesome as Tailwind is, it cannot define its specificity when there are multiple classes that change the same css properties. So we have to come up with our own solution.

Meet the mergeCssClasses(default: string | string[], overrides: string | string[]) helper.

<script setup lang="ts">
import { mergeCssClasses } from "@/toolkit"
</script>

<template>
    <div :class="[mergeCssClasses('mb-2', $attrs.classes)]">
        <slot/>
    </div>
</template>

If you now try to override a class on a component, it will override the existing, matching, classes:

<MyComponent class="mb-4"/>
<!-- MyComponent now has a margin-bottom of 4 -->