Note: The following guide is for Tailwind v4. If you are using Tailwind v3, use [email protected].

Create project

Start by creating a new Vue project using vite:

pnpm create vite@latest my-vue-app -- --template vue-ts

Add Tailwind CSS

pnpm add tailwindcss @tailwindcss/vite

Replace everything in src/index.css with the following:

src/index.css

@import "tailwindcss";

Edit tsconfig.json file

The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to resolve paths, for your IDE:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error:

pnpm add -D @types/node

import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Run the CLI

Run the shadcn-vue init command to setup your project:

pnpm dlx shadcn-vue@latest init

You will be asked a few questions to configure components.json.

Which color would you like to use as base color? › Neutral

Add Components

You can now start adding components to your project.

pnpm dlx shadcn-vue@latest add button

The command above will add the Button component to your project. You can then import it like this:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>