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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://danny-aguilar.gitbook.io/future-vue-components/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.