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.
Create your tailwind.js file
You could create this file to edit tailwind configuration, it is very recommended.
Now enter to that file and paste this basic schema.
Create your postcss.config.js file
Now you need to tell tailwind what to use.
Enter the file that you just created and paste this configuration.
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.
Now if you don't have a css preprocessor just create a css folder and a main.css file.
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.
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
If you don't have css preprocessor just change scss for css.
Install Animate CSS
This package make all animations inside future-vue-components posible, just install it from command line using npm.
Now go to your main.js file and import this package.
Install Moment JS
This package is used by Datepicker component to manage dates, just install it from command line usign npm.
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.
Now import this into your main js file like this.
to use a tag in a template section is future-componentname, component name now is all in lowercase and together.
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.
Last updated
Was this helpful?