DEV Community

loading...

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

Maxwell Adapoe
Updated on ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

Once completed you can check the version using

vue --version
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

and run

npm install && npm run serve

Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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')

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Your page should now look like this

Alt Text

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

Alt Text

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']
  },
...
}
Enter fullscreen mode Exit fullscreen mode

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
      }
    },
  },
...
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)