Migrasi dari Tailwind

Memindahkan halaman lama dari Tailwind dan React ke kelas kit, satu halaman sekali waktu.

Aplikasi aslinya memakai Next.js, React, Tailwind, dan class-variance-authority. Halaman ini memetakan gaya lama ke kelas kit. Yang dipindahkan hanya tampilannya; logika tetap di tempatnya.

Strategi: satu halaman sekali waktu

1
Pasang kit
Lihat Pemasangan. Tailwind tetap jalan berdampingan.
2
Pindahkan satu halaman
Ganti kelas Tailwind dengan kelas ck-. Jangan mengubah logika sekaligus.
3
Bandingkan berdampingan
Buka halaman lama dan baru di dua jendela; cari jarak dan warna yang berbeda.
4
Hapus gaya lama halaman itu
Setelah yakin, buang kelas Tailwind sisa supaya tidak ada dua sistem di satu halaman.

Jangan mencampur di satu elemen

Satu elemen memakai Tailwind atau kelas kit, tidak keduanya. Mencampur membuat nilai jarak saling menimpa dan hasilnya berbeda di tiap halaman.

Peta kelas

Tailwind lama	Kit
bg-background	— (bawaan halaman)
bg-card	ck-card
text-foreground	— (bawaan)
text-muted-foreground	ck-muted
text-sm	ck-text-sm
text-xs	ck-text-xs
text-2xl font-bold	ck-h3
rounded-md	ck-radius-md
rounded-lg border	ck-card
p-6	ck-p-6
p-4	ck-p-4
mt-4 / mb-4	ck-mt-4 / ck-mb-4
flex items-center gap-2	ck-row ck-row-2
grid grid-cols-3 gap-4	ck-grid ck-grid-3 ck-gap-4
flex flex-col	ck-stack
space-y-3	ck-stack-3
truncate	ck-truncate
sr-only	ck-sr-only

Kelas tata letak Tailwind yang murni posisi (flex, absolute, w-full) boleh tetap dipakai — kit tidak menyeragamkan semua hal, hanya yang membentuk identitas visual.

Peta komponen React

Komponen lama memakai CVA untuk varian. Di kit, varian menjadi kelas modifier.

// lama — components/ui/button.tsx
<Button variant="destructive" size="sm">Hapus</Button>

<!-- kit -->
<button class="ck-btn ck-btn--destructive ck-btn--sm" type="button">Hapus</button>

Komponen lama	Bentuk di kit
Button (8 varian, 7 ukuran)	ck-btn ck-btn--{varian} ck-btn--{ukuran}
Card / CardHeader / CardTitle	ck-card / __header / __title
Badge	ck-badge ck-badge--{nada}
Input + Label	ck-field > ck-label + ck-input
Avatar	ck-avatar ck-avatar--c0…c7
Progress	ck-progress > ck-progress__track > __bar
Skeleton	ck-skeleton ck-skeleton--text
Modal / Toaster	Sidebar / Topbar	ck-sidebar / ck-topbar di dalam ck-shell

Yang TIDAK dipindahkan

Hal	Alasan
Logika dan hook React (`useState`, `useEffect`)	Kit hanya lapisan tampilan
Toko status (`zustand`)	Bukan urusan gaya
Panggilan API dan otentikasi	Di luar lingkup
Halaman pemasaran dan halaman hukum	Bukan area dalam aplikasi
Animasi khas React	Diganti transisi CSS pada token durasi

Tailwind masih dipakai?

Kalau proyek lama masih memakai Tailwind, pakai tokens/tailwind.preset.js supaya keduanya berbicara dengan nilai yang sama:

// tailwind.config.ts
import preset from './public/tokens/tailwind.preset.js';

export default {
  darkMode: 'class',
  presets: [preset],
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
};

Dengan preset ini, bg-primary di Tailwind dan --ck-primary di kit menunjuk nilai yang sama. Tidak ada lagi dua definisi biru yang berbeda.