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

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