Building a Form in Vue using Tailwind CSS and VeeValidate (Part 1)
Tags: vue, tailwindcss, veevalidate
Published: 2021-05-25 19:21:06

This is part 1 of 2 on how to create a simple login form with validation using [Vue.js](https://vuejs.org/), [Tailwind CSS](https://tailwindcss.com/) and [VeeValidate](https://vee-validate.logaretm.com/v3) for validation. 

You can clone the example app from my repo on [Github](https://github.com/maxwelladapoe/vue-tailwind-app).

#Part 1: Setting up Vue.js and Tailwind Css
In this Part we will look at setting up Vue.js and Tailwind Css

## Vue CLI
we would start off by creating our [Vue.js](https://vuejs.org/) project using the [Vue CLI](https://cli.vuejs.org/) but you will first have to install it if you haven't already

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```
Once completed you can check the version using 
```
vue --version
```


##Create a Vue.js App
To create a basic app using the CLI all we need to do is to run
```bash
vue create vue-tailwind-app
```
You will be asked to pick a preset. Choose `base`
  
This command generates a basic Vue.js app into a new directory vue-tailwind-app.


We then move into the directory using 
```bash
cd vue-tailwind-app

```
and run 
```bash
npm install && npm run serve

```
to install all the necessary dependancies and start a simple server. Your app should now be accessible on `http://localhost:8080/ ` or on the server and port shown in your terminal.

Your page should look like this
![Vue Default Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjp96vplq03y1jewydws.png)

#Installing Tailwind CSS as a Dependency

Now that our vue app has started successfully we can move on to setting up tailwind in our project.

We first need to run 
 
```bash
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```
to install the necessary dependancies for [Tailwind CSS](https://tailwindcss.com/) ,[PostCss 7](https://postcss.org/) and [autoprefixer](https://github.com/postcss/autoprefixer).

#Configure Vue.js and Tailwind CSS

Once this is done we need to create a Tailwind config file `tailwind.config.js` and a PostCSS config file `postcss.config.js` in your base directory. This can be done by running

```bash
npx tailwindcss init -p

```

Create a CSS file if you don't already have one, preferable in your assets folder `src/assets/css/main.css` and use the @tailwind directive to inject Tailwind's base, components, and utilities styles:

```css
/*src/assets/css/main.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Paste the above code in your main.css file. There may be some errors thrown by your IDE but you can ignore them.

We now need to add our main.css to our `src/main.js` to create the final connection. In your main.js file 
add `import './assets/css/main.css'` to your initial imports. Your file should now look like this: 
```diff
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+import './assets/css/main.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

```

## Testing out Tailwind CSS
In our App.vue file we will replace the div with the id='nav'
with

```html

   <nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
      <div class="flex items-center flex-shrink-0 text-white mr-6">
        <svg
          class="fill-current h-8 w-8 mr-2"
          width="54"
          height="54"
          viewBox="0 0 54 54"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
          />
        </svg>
        <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
      </div>
      <div class="block lg:hidden">
        <button
          class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
        >
          <svg
            class="fill-current h-3 w-3"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>
      <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div class="text-sm lg:flex-grow">
          <router-link
            to="/"
            class="block mt-4 lg:mr-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >Home</router-link
          >

          <router-link
            to="/about"
            class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white"
            >About</router-link
          >
        </div>
      </div>
    </nav>
```
Your page should now look like this

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvo3llidbwahwmi6sy8d.png)

And voila! you have successfully linked Tailwind Css to your vue.js project 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9h91hb95c9aqjju3ul3.gif)

This Brings us to the end of Part 1. You can check out Part 2 [here]('https://dev.to/maxwelladapoe/building-a-form-in-vue-using-tailwind-css-and-veevalidate-part-2-19fi'). 
Below is an optional guide on some things you can do to theme Tailwind.

##Tailwind Tweaks (optional)

When preparing for production, configure the purge option to remove any unused classes to obtain the smallest file size:
to do so you must modify your tailwind.config.js .

```javascript
module.exports = {
purge: {
    mode:'layers',
    content:['./public/**/*.html', './src/**/*.vue']
  },
...
}
```

You can also theme your tailwind using 
```javascript
const colors = require('tailwindcss/colors')

module.exports = {
...
 theme: {
    extend: {
      colors:{
        emerald:colors.emerald,
        gray: colors.trueGray,
        orange: colors.orange
      }
    },
  },
...
}
```