docs: overhaul README with project setup and integration guides

Replace the default Vite template README with comprehensive project documentation.

This update includes:
- A clear description of the project's technology stack (Vue 3, Vite, Tailwind 4).
- Step-by-step instructions for setting up the development environment.
- A detailed guide on integrating Tailwind CSS v4 with Vite, covering plugin setup, CSS configuration with `@theme`, and
custom utilities.

README.md

@@ -1,39 +1,146 @@
-# .
+# Framework Combination
 
-This template should help get you started developing with Vue 3 in Vite.
+This is a learning project that combines multiple frameworks to create a demo application.
 
-## Recommended IDE Setup
+- **Base framework:** Vue 3 + Vite 7
+- **CSS framework:** Tailwind CSS 4
+- **Package manager:** pnpm
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+---
 
-## Type Support for `.vue` Imports in TS
+## Development Setup
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project 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
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
 pnpm dev
 ```
 
-### Type-Check, Compile and Minify for Production
+---
+
+## Tailwind CSS Integration
+
+### Tailwind CSS v3
+
+For reference, Tailwind CSS v3 setup (as learned from ChatGPT) involves:
 
 ```sh
-pnpm build
+pnpm add -D tailwindcss@3.4.1 postcss autoprefixer
+pnpm exec tailwindcss init -p     # Generates tailwind.config.js and postcss.config.js
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+### Tailwind CSS v4
+
+Tailwind CSS 4 simplifies the setup significantly:
 
 ```sh
-pnpm lint
+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>
 ```