TailwindCSS + Vuetensils = 😍 accessible and composable Vue components

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!