Buat project

Mulai dengan membuat project Astro baru memakai tool milik Astro sendiri. Template with-tailwindcss sudah berisi Tailwind CSS v4, dan --add vue memasang integrasi Vue:

pnpm create astro@latest astro-app  --template with-tailwindcss --install --add vue --git

init belum menyiapkan Astro otomatis

Untuk Vite dan Nuxt, kliping init memasang Tailwind CSS dan alias @ sendiri. Untuk Astro belum: Tailwind CSS v4 dan alias @ harus sudah ada sebelum init dijalankan. Template di atas sudah membawa Tailwind; alias-nya Anda tambahkan di langkah berikut. Kalau project Astro Anda dibuat dengan cara lain, ikuti Manual Installation.

Sunting file tsconfig.json

Tambahkan kode berikut ke tsconfig.json supaya path bisa diselesaikan dengan benar:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Jalankan CLI

Jalankan perintah init untuk memasang dasar Kliping (helper cn() beserta dependensinya dan token tema) dan menulis components.json:

pnpm dlx kliping@latest init

Tambahkan komponen

Sekarang Anda bisa mulai menambahkan komponen ke project.

pnpm dlx kliping@latest add button

Perintah di atas menambahkan komponen Button ke project Anda. Setelah itu, import seperti ini:

---
import { Button } from "@/components/ui/button"
---

<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>