Framework Combination

This is a learning project that combines multiple frameworks to create a demo application.

• Base framework: Vue 3 + Vite 7
• CSS framework: Tailwind CSS 4
• UI framework: Shadcn UI
• Package manager: pnpm

---

Development Setup

To set up this project from scratch:

pnpm create vue@latest
# Enter your project name
# Select: TypeScript, Router, Pinia, ESLint (Optional), Prettier
# Choose "Empty Project"
pnpm install
pnpm dev

---

Tailwind CSS Integration

Tailwind CSS v3

For reference, Tailwind CSS v3 setup (as learned from ChatGPT) involves:

pnpm add -D tailwindcss@3.4.1 postcss autoprefixer
pnpm exec tailwindcss init -p     # Generates tailwind.config.js and postcss.config.js

Tailwind CSS v4

Tailwind CSS 4 simplifies the setup significantly:

pnpm add tailwindcss @tailwindcss/vite

Register the Tailwind CSS plugin in vite.config.ts:

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    // ...
    tailwindcss(),
  ],
  // ...
})

Create src/styles/main.css with the following content:

@import 'tailwindcss';

/* Define theme (Tailwind CSS 4 no longer uses tailwind.config.js) */
@theme {
  /* Primary color palette */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;

  /* Animation variable */
  --animate-float: float 6s ease-in-out infinite;

  /* Keyframes */
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}

/* Custom utility/class for gradient text (optional) */
@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
  }
}

/* Alternative syntax: 
@utility text-gradient {
  @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
}
*/

Import the stylesheet in main.ts:

import '@/styles/main.css'

Now you can use Tailwind CSS atomic classes in your project.

---

Example Usage for Tailwind CSS v4

<script setup lang="ts"></script>

<template>
  <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
    <div>
      <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
        <svg
          class="h-6 w-6 text-white"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        >
          <!-- Icon SVG content -->
        </svg>
      </span>
    </div>
    <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight">
      Writes Upside-Down
    </h3>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">
      The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even
      works in outer space.
    </p>
  </div>
</template>

Shadcn UI

Installation guide adapted from the official Shadcn UI Vite documentation.

1. Configure TypeScript Paths

Add the baseUrl and paths properties to the compilerOptions section in both tsconfig.json and tsconfig.app.json to enable absolute imports:

tsconfig.json

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

tsconfig.app.json

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

This allows you to import files from src using @/ instead of relative paths like ../../.

---

2. Install Node Type Definitions

Shadcn UI requires Node type definitions for TypeScript. Install them as a development dependency:

pnpm add -D @types/node

---

3. Initialize Shadcn CLI

Run the Shadcn CLI to set up the UI components and folder structure:

pnpm dlx shadcn@latest init

Follow the prompts to choose which components to include. After initialization, you can start using Shadcn UI components in your Vue project.