Built to be customized

Most component libraries depend on CSS frameworks with an opinionated and limited number of styles defined by the people who maintain them.

If you are ok with the design, those libraries are great for a simple CRUD application, but hey! Your application is meant to do more, right?

All VueTailwind components were designed to be customized with custom CSS classes and unlimited variants defined when you import the library or when you use the component.

This means that when you use this library, you are not attached to any style defined by us like it happens when you use a typical library of components like Bootstrap. Instead, you can determine your theme based on your application's needs.

This library makes special sense when you work with utility-first frameworks like TailwindCss, the default framework used in this library.

In summary, with this library, you will be able to:

• Define your component's look and feel by defining custom default CSS classes.
• Add unlimited variants for every specific use case.
• Override the default value of the props according to your needs.
• Create different versions of one component with different default settings.

Quick start

1. Install the dependencies

npm install vue-tailwind --save

Or:

yarn add vue-tailwind

More details →

2. Install TailwindCSS (Optional)

This library uses TailwindCSS classes by default. Still, it should work with any CSS framework since all the CSS classes are configurable.

More details →

3. Configure Vue to use vue-tailwind

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

const components = {
  //...
}

Vue.use(VueTailwind, components)

More details →

Workflow

Once your different variants were defined you can use the variant prop to define which variant should be applied:

<t-input variant="error" />

The variant prop also accepts an object that takes the first attribute with a truthy value

<t-input
  :variant="{
    error: inputIsNotValid,
    success: inputIsValid,
  }"
/>

More details →

What's new in version 2.x

• Install only the components you need for smaller bundle size
• Custom name for components
• The ability to install the same component multiple times with different default settings and name
• New default theme

Plans for v3.x

• Rebuild with Vue 3
• Multiple typescript improvements
• Stronger test coverage
• Accesibility first
• New Branding

Read more →

Contribute

Is this project helpful for you? Consider sponsoring me https://github.com/sponsors/alfonsobries.

Of course, any other kind help is welcome, even if you notice some grammar mistakes (English is not my primary language) see contribute page for details.