https://github.com/ajomuch92/vue-tailwind-elements

Project for Vuejs 2, to build components based on Tailwind Elements package
https://github.com/ajomuch92/vue-tailwind-elements

tailwind tailwind-elements tailwindcss vue vuejs

Last synced: about 2 months ago
JSON representation

Project for Vuejs 2, to build components based on Tailwind Elements package

• Host: GitHub
• URL: https://github.com/ajomuch92/vue-tailwind-elements
• Owner: ajomuch92
• License: mit
• Created: 2021-12-09T18:30:48.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-26T01:00:25.000Z (over 1 year ago)
• Last Synced: 2024-04-10T06:18:46.763Z (9 months ago)
• Topics: tailwind, tailwind-elements, tailwindcss, vue, vuejs
• Language: Vue
• Homepage: https://www.npmjs.com/package/vue-tailwind-elements
• Size: 1.36 MB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Tailwind Elements

A light library of components based on [Tailwind Elements](https://tailwind-elements.com/) and [Tailwind](https://tailwindcss.com/) 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](https://www.npmjs.com/package/vue3-tailwind-elements).

# Instalation

1. Install Tailwind. Follow this [guide](https://tailwindcss.com/docs/guides/vite#vue) to do it.

2. Install the package from NPM:  

```bash

npm install vue-tailwind-elements

```

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

```javascript

...

import VueTailwindElements from 'vue-tailwind-elements';

Vue.use(VueTailwindElements);

...

```

4. And add these lines to your tailwind.config.js file:

```javascript

...

  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:

```javascript

...

  plugins: [

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

  ],

...

```

## Author

This library is created by [Aarón Montes](https://ajomuch92.site/ "Aarón Montes"). 

**Support me to improve and maintain this library**



## Contribution

Want to contribute? Great!. Open a [new PR here](https://github.com/ajomuch92/vue-tailwind-elements/pulls) or a [new issue here](https://github.com/ajomuch92/vue-tailwind-elements/issues)

## License

MIT