> For the complete documentation index, see [llms.txt](https://danny-aguilar.gitbook.io/future-vue-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://danny-aguilar.gitbook.io/future-vue-components/master.md).

# Installation

## Install Tailwind via npm

For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.

```bash
$ npm install --save tailwindcss
```

## Create your tailwind.js file

You could create this file to edit tailwind configuration, it is very recommended.

```bash
$ touch tailwind.js
```

Now enter to that file and paste this basic schema.

```javascript
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
```

## Create your postcss.config.js file

Now you need to tell tailwind what to use.

```bash
$ touch postcss.config.js
```

Enter the file that you just created and paste this configuration.

```javascript
module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}
```

## Create your main.css or main.scss file

If you have a css preprocessor like sass you may want to create a main.scss file inside of assets folder by creating a new folder scss and put the main.scss file inside of it.

```bash
$ cd src/assets
$ mkdir scss
$ touch main.scss
```

Now if you don't have a css preprocessor just create a css folder and a main.css file.

```bash
$ cd src/assets
$ mkdir css
$ touch main.css
```

## Add Tailwind to your CSS

Whether you have a css preprocessor or not paste the next lines inside the main file in order to import tailwind styles.

```css
 /* Tailwind Css */
 @import "./../../../node_modules/tailwindcss/dist/base.css";
 @import "./../../../node_modules/tailwindcss/dist/components.css";
 @import "./../../../node_modules/tailwindcss/dist/utilities.css";
```

{% hint style="warning" %}
Due to a bug in recent versions of tailwind and how they interact with vue you may experience an error if you import this tailwind files in other way.
{% endhint %}

Now you're almost there, go to your main.js file and import the main.scss or main.css file that you just created

```javascript
// Main Scss File
import './assets/scss/main.scss';
```

If you don't have css preprocessor just change scss for css.

```javascript
// Main Css File
import './assets/css/main.css';
```

## Install Animate CSS

This package make all animations inside future-vue-components posible, just install it from command line using npm. 

```bash
$ npm install --save animate.css
```

Now go to your main.js file and import this package.

```javascript
import 'animate.css';
```

## Install Moment JS

This package is used by Datepicker component to manage dates, just install it from command line usign npm.

```bash
$ npm install --save moment
```

That's enough, but if you want to keep using moment in your project you may want to import moment on your main js file

{% hint style="warning" %}
Due to a bug already issued it to moment js, other locales as spanish are not available for the moment, this error is shown as **Can't resolve './locale'**
{% endhint %}

## Install Future Vue Components

Now we are ready to install the main package just write this in your command line using npm.

```bash
$ npm install --save future-vue-components
```

Now import this into your main js file like this.

```javascript
import ComponentName from 'future-vue-components'
Vue.use(ComponentName)
```

to use a tag in a template section is **future-componentname,** component name now is all in lowercase and together.

```markup
<future-componentname><future-componentname/>
```

**ComponentName** change depending on the component that you want to use, they are all on the component tab to choose and know how each one of them works.