Migrate ke ferzui

Panduan migrasi dari Bootstrap / Tailwind ke ferzui. Berikut mapping umum class-name dan pola penggunaan.

Dari Bootstrap

Bootstrap	ferzui	Keterangan
`.container`	`.container`	Ukuran dan breakpoint sepadan
`.row`, `.col-*`	`.row`, `.col-*`	Grid flex 12 kolom kompatibel
`.btn .btn-primary`	`.btn .btn-primary`	API mirip; varian success/danger/warning/info ada
`.alert .alert-primary`	`.alert .alert-primary`	Alert dengan tone modern
`.form-control`	`.form-control`	Fokus ring dan states
`.d-flex .justify-content-between`	`.d-flex .justify-between`	Penamaan utilitas dipersingkat
`.text-center`	`.text-center`	Sejalan
`.shadow .rounded`	`.shadow .rounded`	Skala shadow/radius lebih modern

Dari Tailwind

Tailwind bersifat utility-first. ferzui menyediakan utilitas umum + komponen siap pakai. Contoh mapping:

Tailwind	ferzui	Keterangan
`px-4 py-2`	`.px-4 .py-2`	Skala spacing serupa
`flex justify-between items-center`	`.d-flex .justify-between .items-center`	Utilitas semantik
`rounded-lg shadow`	`.rounded-lg .shadow`	Skala radius/shadow sesuai tokens
`text-center text-gray-600`	`.text-center .text-muted`	Muting via token teks
`bg-blue-500 text-white`	`.bg-primary .text-white`	Varian semantic color

Tips Migrasi

Mulai dari layout & spacing (container, row/col, p/m).
Ganti komponen dasar: .btn, .card, .form-control, .alert.
Map utilitas yang sering digunakan (display, flex, justify, items, text, bg, border, shadow, rounded).
Sesuaikan warna di Theme Editor agar brand match.
Uji aksesibilitas (focus ring, kontras) dan responsif.