Deploy a site with Vue-Tailwind in Netlify

tanzimibthesam

Tanzim Ibthesam

Posted on June 4, 2021

Deploy a site with Vue-Tailwind in Netlify

Here I will mention how easy it is to deploy a static site or a site done with Firebase to Netlify.
Create a Vue project with Tailwind
vue create vue-tailwind if you want to know about how to create a Vue project from scratch with Vue Click here
After installing Vue from cli cd to the project directory. In Cli type vue add tailwind its the easiest way to install Tailwind from Vue.
image

So here it will ask whether you want none,full and minimal version of tailwind.config.js
image
Now you dont need any third party plugins for JIT compiler
In Home.vue I have copied and pasted a component from Tailblocks in Home.vue
Build

Then run npm run build
image
Now you see there will be a dist folder on the left
Drag dist folder to Netlify
This is how your netlify dasboard will look like
image
This is how you will drag and drop dist folder here
image
Your site afte deployment with URL
This is how your netlify dashboard will look like after deployment
image
So now we see how url of our site if we click the url it will take us to our landing page.

This is how my landing page looks like
image
I will write another blog on how to deploy it with Github so that if you change anything you dont need to reupload.

💖 💪 🙅 🚩
tanzimibthesam
Tanzim Ibthesam

Posted on June 4, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related