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

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

2. Install the package from NPM:

npm install vue3-tailwind-elements

3. 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');
...

4. 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