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
}
},
},
...
}
Top comments (0)