Vue Tailwind Elements

A light library of components based on Tailwind Elements and Tailwind for Vuejs 3. Currently, project under CONSTRUCTION, do not use for production. For Vuejs 2, refer to this package.

Migrated Components

Accordion
Alert
Badge
Breadcrumb
Button
Button group
Spinner
Card
Checkbox
Chip
Icon
Datepicker
File picker
Icon
Input
List group
Loading
Spinner
v outside directive

The last two components are not available as standalone components.

Instalation

Install Tailwind. Follow this guide to do it.
Install the package from NPM:

npm install vue3-tailwind-elements

Import in your main.js (or index.js) file and install it:

...
import Vue3TailwindElements from 'vue3-tailwind-elements';
import 'vue3-tailwind-elements/dist/style.css';

createApp(App)
  .use(Vue3TailwindElements)
  .mount('#app');
...

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/dist/plugin'),
    ],
  }
...

See an example here or documentation here.

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

Contribution

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

License

MIT