Installation

Follow the procedures below to install and configure your dependencies.

Vue 3

Create a new Vue 3 project

Start by creating a new Vue 3 project by running the command below in your terminal:

npm

npm create vue@latest

yarn

yarn dlx create-vue@latest

pnpm

pnpm create vue@latest

bun

bun create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. Select your preferred options from the prompts.

Tailwind

Install Tailwindcss and its peer dependencies:

npm

npm install -D tailwindcss postcss autoprefixer

yarn

yarn add -D tailwindcss postcss autoprefixer

pnpm

pnpm add -D tailwindcss postcss autoprefixer

bun

bun add -D tailwindcss postcss autoprefixer

Then generate your tailwind.config.js and postcss.config.js files by running the command below:

npx tailwindcss init -p

Configure your template paths by adding the following to your tailwind.config.js file:

tailwind.config.js

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

Add the @tailwind directives for each of Tailwind’s layers to your ./src/assets/css/tailwind.css file.

tailwind.css

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

Install @vueuse/motion

Install the @vueuse/motion library by running the command below in your terminal:

npm

npm install @vueuse/motion

yarn

yarn add @vueuse/motion

pnpm

pnpm add @vueuse/motion

bun

bun add @vueuse/motion

Then configure it in your main.ts or main.js file as shown below:

main.ts

import { createApp } from "vue";
import "./assets/css/tailwind.css";
import App from "./App.vue";
import { MotionPlugin } from '@vueuse/motion'
const app = createApp(App)
app.use(MotionPlugin)
app.mount("#app");

Install Clsx and Tailwind Merge

Install clsx and tailwind-merge by running the command below in your terminal:

npm

npm install clsx tailwind-merge

yarn

yarn add clsx tailwind-merge

pnpm

pnpm add clsx tailwind-merge

bun

bun add clsx tailwind-merge

Then, in your ./src/lib/utils.ts file, configure it as shown below:

utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Nuxt 3

Create a new Nuxt 3 project

Start by creating a new Nuxt 3 project by running the command below in your terminal:

npm

npx nuxi@latest init <your-project-name>

Tailwind

Install the @nuxtjs/tailwindcss module by running the command below in your terminal:

nuxt

npx nuxi@latest module add tailwindcss

npm

npm install -D @nuxtjs/tailwindcss

yarn

yarn add -D @nuxtjs/tailwindcss

pnpm

pnpm i -D @nuxtjs/tailwindcss

bun

bun add -D @nuxtjs/tailwindcss

If the modules array is not populated with the @nuxtjs/tailwindcss module, go ahead and add it as shown below:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

Generate the tailwind.config.js file by running the command below:

npx tailwindcss init

The add the @tailwind directives for each of Tailwind’s layers to your ./assets/css/tailwind.css file.

tailwind.css

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

then add the following into your nuxt.config.ts file:

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
  tailwindcss: {
    cssPath: ["~/assets/css/tailwind.css", { injectPosition: "first" }], 
    configPath: "tailwind.config", 
    exposeConfig: {
      level: 2, 
    }, 
    config: {}, 
    viewer: true, 
  }, 
});

Install @vueuse/motion

Install the @vueuse/motion library by running the command below in your terminal:

nuxt

npx nuxi@latest module add @vueuse/motion

npm

npm install @vueuse/motion

yarn

yarn add @vueuse/motion

pnpm

pnpm add @vueuse/motion

bun

bun add @vueuse/motion

Then, add the module to the modules array as shown below:

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss", "@vueuse/motion/nuxt"], 
  tailwindcss: {
    cssPath: ["~/assets/css/tailwind.css", { injectPosition: "first" }],
    configPath: "tailwind.config",
    exposeConfig: {
      level: 2,
    },
    config: {},
    viewer: true,
  },
});

Install Clsx and Tailwind Merge

Install clsx and tailwind-merge by running the command below in your terminal:

npm

npm install clsx tailwind-merge

yarn

yarn add clsx tailwind-merge

pnpm

pnpm add clsx tailwind-merge

bun

bun add clsx tailwind-merge

Then, in your ./lib/utils.ts file, configure it as shown below:

utils.ts

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Next step

You can now go ahead and start building your web application 🥳.