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 🥳.