vue-framework-combinations/README.md

# 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:

```sh
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:

```sh
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:

```sh
pnpm add tailwindcss @tailwindcss/vite
```

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

```ts
import tailwindcss from '@tailwindcss/vite'

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

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

```css
@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`:

```ts
import '@/styles/main.css'
```

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

---

#### Example Usage for Tailwind CSS v4

```vue
<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](https://ui.shadcn.com/docs/installation/vite).

#### 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**

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

**tsconfig.app.json**

```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:

```sh
pnpm add -D @types/node
```

---

#### 3. Initialize Shadcn CLI

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

```sh
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.