Creating component-based UI libraries is a challenge in balancing how much customization options you provide. Vuetensils was always designed to be extremely customizable, mostly relying on slots and CSS.
Slots and CSS provide a lot of options for customization, but there wasn’t much support for customizing the actual markup. This is deliberate because the focus of the library is accessibility and semantics. Therefore, it needs to maintain control over most of the markup.
However, one big issue with restricting access to the HTML is for users that rely on CSS libraries working with classes, such as TailwindCSS or Bootstrap.
That changes today!
With the release of version 0.3.10, Vuetensils now allows developers to customize the classes in the output HTML.
Adding TailwindCSS classes to Vuetensils
To explore this feature more, let’s look at adding custom classes to a Vuetensils VAlert
component using TailwindCSS’s utility classes.
I won’t go into too much detail about adding TailwindCSS to a Vue project. For that, take a look at this article.
Instead, let’s look at a component example:
<template>
<div>
<button
class="p-2 rounded-sm text-white bg-green-600"
@click="showAlert = !showAlert"
>Toggle Alert</button>
<VAlert
v-model="showAlert"
:classes="{
root: 'mt-3 rounded-sm border border-solid border-blue-800 p-3 text-blue-800 bg-blue-100'
dismiss: 'ml-5 p-1 rounded-sm leading-none text-white bg-blue-800'
}"
dismissible
>Vuetensils + Tailwind = 😍</VAlert>
</div>
</template>
<script>
import { VAlert } from "vuetensils";
export default {
components: {
VAlert
},
data: () => ({
showAlert: false
})
};
</script>
We have a basic button
that is styled with TailwindCSS classes and toggles the showAlert
property.
The VAlert
component uses v-model
to track the showAlert
property. It accepts an object as the classes
prop with the custom classes for the root
element and the dismiss
button. The root styles could have been placed in a class
attribute, but for the sake of this example, we will use the classes
prop.
And that’s pretty much it. A super customized alert UI that is semantic, accessible, and doesn’t add any unused CSS to your final bundle. Sweet!
Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.
Originally published on austingil.com.