TailwindCSS + Vuetensils = 😍 accessible and composable Vue components
Tags: a11y, tailwindcss, html, vue
Published: 2019-11-06 01:19:57

---
title: TailwindCSS + Vuetensils = 😍 accessible and composable Vue components
published: true
date: 2019-11-04 17:02:42 UTC
tags: Accessibility,TailwindCSS,HTML,Vue.js
canonical_url: https://stegosource.com/tailwindcss-vuetensils-accessible-composable-vue-components/
cover_image: https://stegosource.com/wp-content/uploads/Vuetensils-unique-accessible-semantic-Vue-components.jpeg
---

Creating component-based UI libraries is a challenge in balancing how much customization options you provide. [Vuetensils](https://vuetensils.stegosource.com/ "Vuetensils") was always designed to be extremely customizable, mostly relying on [slots](https://vuejs.org/v2/guide/components-slots.html) 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](https://tailwindcss.com/) or [Bootstrap](https://getbootstrap.com/).

That changes today!

With the release of version 0.3.10, [Vuetensils](https://vuetensils.stegosource.com/ "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](https://vuetensils.stegosource.com/ "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](https://medium.com/@andreaminato95/setting-up-a-vue-cli-3-app-with-tailwindcss-and-purgecss-286688dcd8c1).

Instead, let’s look at a component example:

```vue
<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!