1458b04b17
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.
147 lines
3.1 KiB
Markdown
147 lines
3.1 KiB
Markdown
# 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>
|
|
```
|