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:

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

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