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.

$ npm install --save tailwindcss

Create your tailwind.js file

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

$ touch tailwind.js

Now enter to that file and paste this basic schema.

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

Create your postcss.config.js file

Now you need to tell tailwind what to use.

$ touch postcss.config.js

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

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.

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

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

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

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.

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

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

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

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

$ npm install --save animate.css

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

import 'animate.css';

Install Moment JS

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

$ 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

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'

Install Future Vue Components

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

$ npm install --save future-vue-components

Now import this into your main js file like this.

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.

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