Open in app

Sign in

Write

Sign in

How to set up Vue.js 3 + Tailwind CSS Style Framework

Bimsara De Silva
6 min readDec 4, 2022

--

Content

  1. How to set up Tailwind CSS in your simple project.
  2. How to use CDN links for Vue.js 3 and tailwind.
  3. How to install Vue js 3.
  4. How to install Tailwind CSS Framework in Vue.js 3 Project.
  5. How to install “Vue.js 3” CLI and add the “Tailwind CSS”.

Get Started

  1. How to set up Tailwind CSS in your simple project.

How to setup Tailwindcss Framework in your project

Content

medium.com

2. How to use CDN links for Vue.js 3 and tailwind

Step 1

Go to the below sites and get CDN links.

Quick Start | Vue.js

To quickly get a taste of Vue, you can try it directly in our Playground. If you prefer a plain HTML setup without any…

vuejs.org

Try Tailwind CSS using the Play CDN - Tailwind CSS

Use the Play CDN to try Tailwind right in the browser without any build step.

tailwindcss.com

Vue js CDN link.

<!-- Vue js cdn link -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Tailwind CDN link.

 <!-- Tailwind css cdn link -->
 <script src="https://cdn.tailwindcss.com"></script>

Step 2

Create the “index.html” file.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue js + tailwind</title>
    <!-- Tailwind css cdn link -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Customizing your theme -->
    <script src="tailwind.js"></script>

    <!-- Vue js cdn link -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- external javascript file -->
    <script defer src="vue.js"></script>
  </head>
  <body class="bg-yellow-200">
    <div class="text-center mt-10">
      <button class="bg-bg_color_1 w-32 h-10 text-white rounded-xl">
        Login
      </button>
      <button class="bg-bg_color_2 w-32 h-10 text-white rounded-xl">
        Sign up
      </button>
      <div id="demo" class="text-purple-900 font-bold text-xl">{{msg}}</div>
    </div>
  </body>
</html>

Step 3

Create the “tailwind.js” file.

tailwind.config = {
  theme: {
    extend: {
      colors: {
        bg_color_1: "red",
        bg_color_2: "blue",
      },
    },
  },
};

Create the “vue.js” file.

const { createApp } = Vue;

createApp({
  data() {
    return {
      msg: "hello world",
    };
  },
//   template: `<div>count is {{ msg }}</div>`
}).mount("#demo");

File Structure.

Step 4

Then use the live server extension in vs code to run the project.

Go to the “index.html” file then right-click and select Open with Live Server.

Output

3. How to install Vue js 3.

Step 1

Type the command in your cmd to create the Vue project.

npm init vue@latest

Use the following codes in the order in your cmd.

cd my-vue-app
npm install
code .

Step 2

Run command

npm run dev

File Structure

4. How to install Tailwind CSS Framework in Vue.js 3 Project.

Step 1

Go to the below sites and get the npm command.

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The…

tailwindcss.com

Run the following command in your terminal to install the “ tailwindcss ”.

npm install -D tailwindcss

The auto-updated “ package.json ” file.

Step 2

Run the following command in your terminal.

npx tailwindcss init

Then auto-created the “ tailwind.config.js ” file.

Step 3

Customize the “tailwind.config.js” file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4

create the “ input.css ” file in the src folder.

Path —“ src/input.css ”.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5

Run the command below, it will automatically create the file “output.css” in the “dist” folder.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Step 6

Get the “ output.css ” file path.

<link href="./dist/output.css" rel="stylesheet">

Update the “ index.html ” file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <link href="./dist/output.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Step 7

Update the “ main.js ” file.

import { createApp } from 'vue'
import App from './App.vue'

// import './assets/main.css'

createApp(App).mount('#app')

Update the “ App.vue” file.

<script setup></script>

<template>
  <div class="container mx-auto mt-10 bg-gray-100 rounded-md shadow-md p-5">
    <h1 class="text-2xl">How to setup Tailwind Css Framework</h1>
    <div class="mt-5 ml-3">
      <h3 class="text-xl font-bold">Step 1</h3>
      <p>****</p>
      <h3 class="text-xl font-bold">Step 2</h3>
      <p>****</p>
      <h3 class="text-xl font-bold">Step 3</h3>
      <p>****</p>
    </div>
  </div>
</template>

<style>
body {
  background-color: aquamarine;
}
</style>

Step 8

Open a new terminal and run the following code.

npm run dev

Output

5. How to install “Vue.js 3” CLI and add the “Tailwind CSS”.

Step 1

Run the below command to install Vue CLI globally.

npm install -g @vue/cli

Step 2

Check for your Vue CLI version.

vue --version

Step 3

Create the Project.

vue create vue-app

File Structure

Step 4

Use the following command to run the Vue project.

npm run serve

Step 5

Run the following command in your terminal to install the “ tailwindcss ”.

npm install -D tailwindcss

Then the “package.json” file was automatically updated.

Step 6

Run the following command in your terminal.

npx tailwindcss init -p

Auto-created the “ tailwind.config.js ” file. Then get the code below to update that file.

content: ["./src/**/*.{vue,js,ts,jsx,tsx}"]

File — “ tailwind.config.js ”.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Auto-created the “ postcss.config.js ” file.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 7

Make the file path as “public/index.css” and enter the following codes.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 8

Update the “ main.js ” file

import { createApp } from 'vue'
import App from './App.vue'

import '../public/index.css'

createApp(App).mount('#app')

Step 9

Update the “ App.vue ” file.

Path “src/App.vue”

<template>
  <div class="text-center mt-5">
    <input
      type="text"
      class="bg-slate-100 w-96 py-2 rounded pl-5 border-red-200 border-2"
      placeholder="comments"
    />
    <button
      class="block m-auto mt-2 text-white bg-purple-600 px-5 py-2 rounded-xl"
    >
      Submit
    </button>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
body {
  @apply bg-blue-800;
}
</style>

Step 10

Install the Vue Language Features (Volar) extension in vs code.

Output

Summary

First discussed how to use CDN links “Vue js” and “Tailwind Css”. Then discussed how to setup the “Vue js” project. Then discussed how to install Tailwind CSS Framework in Vue js Project. Finally, discuss how to install “Vue.js” CLI and added “Tailwind css”.

Vuejs
Tailwind
Tailwind Css
Vue 3
Css Framework

--

--

Bimsara De Silva

Written by Bimsara De Silva

270 Followers

I Am Beginner Web Developer

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams