Skip to content

ajomuch92/vue-tailwind-elements

Repository files navigation

Vue Tailwind Elements

A light library of components based on Tailwind Elements and Tailwind for Vuejs. Currently, there are more than 40 components including custom directives and icons utility.

New Features 💥

  • Now compatible with Tailwind v3
  • Adding min width to date and time picker
  • Adding selectable prop to button group

A package for Vue JS 3 is being develop here.

Instalation

  1. Install Tailwind. Follow this guide to do it.

  2. Install the package from NPM:

npm install vue-tailwind-elements
  1. Import in your main.js (or index.js) file and install it:
...
import VueTailwindElements from 'vue-tailwind-elements';

Vue.use(VueTailwindElements);
...
  1. And add these lines to your tailwind.config.js file:
...
  module.exports = {
    content: [
      './node_modules/vue-tailwind-elements/**/*.{js,ts,vue}'
    ],
    theme: {
      extend: {},
    },
    plugins: [
      require('vue-tailwind-elements/src/plugin'),
    ],
  }
...

Nuxt:

Put the last configuration into a plugin file and the use it into the nuxt.config.js file like this:

...
  plugins: [
    { src: '~/plugins/vue-tailwind-elements.js', mode: 'client' }
  ],
...

Author

This library is created by Aarón Montes. Support me to improve and maintain this library Buy Me A Coffee

Contribution

Want to contribute? Great!. Open a new PR here or a new issue here

License

MIT