Building a Form in Vue using Tailwind CSS and VeeValidate (Part 1)

This is part 1 of 2 on how to create a simple login form with validation using Vue.js, Tailwind CSS and VeeValidate for validation.

You can clone the example app from my repo on Github.

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 project using the Vue CLI but you will first have to install it if you haven't already

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

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

cd vue-tailwind-app

and run

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

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

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

to install the necessary dependancies for Tailwind CSS ,PostCss 7 and 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

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:

/*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:

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

   <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

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

This Brings us to the end of Part 1. You can check out Part 2 here.
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 .

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

You can also theme your tailwind using

const colors = require('tailwindcss/colors')

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