Frontend Rikat CSS Engine - Dokumentasi Resmi Larapak

Framework CSS Utility-First JIT Asli

Rikat CSS adalah compiler CSS utility-first terintegrasi langsung di dalam Larapak. Anda tidak membutuhkan Node.js, npm, webpack, maupun postcss untuk mendapatkan kecepatan dan fleksibilitas utility class!

Kompilasi Cepat JIT

Engine Rikat CSS memindai seluruh file template sawangan/**/*.nview dan mengekstrak kelas-kelas yang Anda gunakan ke dalam bundle CSS bersih di njobo/css/rikat.css:

# Kompilasi CSS satu kali untuk produksi (Dialek Ngapak)
ngapakin rikat:rakit
# Atau alias standar: ngapakin css:build

# Mode watcher otomatis saat Anda mengedit file template
ngapakin rikat:pantau
# Atau alias standar: ngapakin css:watch

Peningkatan Resolusi Jalur di v1.1.0: Perintah kompilasi CSS secara cerdas membaca dialek bahasa proyek yang aktif: otomatis membaca template di sawangan/ dan menghasilkan berkas di njobo/css/rikat.css pada dialek Ngapak, atau resources/views/ dan public/css/rikat.css pada dialek standar.

Dukungan Utilitas Lengkap

Skala Spacing 4px: p-4, m-2, px-6, py-3, gap-4, space-y-2.
Sistem Layout Grid & Flexbox: flex, grid, grid-cols-12, col-span-6, items-center, justify-between.
Varian Responsif: sm:p-6, md:grid-cols-2, lg:max-w-4xl.
Varian State Interaktif: hover:bg-red-600, focus:ring-2, active:scale-95.
Nilai Arbitrer Dinamis: w-[320px], top-[72px], bg-[#ff2d20].

Contoh Penggunaan di Template

<div class="max-w-md mx-auto bg-[#18181b] p-6 rounded-lg border border-[#27272a] shadow-lg">
    <h3 class="text-xl font-bold text-white mb-2">Kartu Produk</h3>
    <p class="text-gray-400 text-sm mb-4">Dibuat dengan efisiensi tinggi tanpa dependensi npm.</p>
    <button class="bg-[#ff2d20] hover:bg-[#e02418] text-white px-4 py-2 rounded text-sm font-semibold transition">
        Beli Sekarang
    </button>
</div>

Sebelumnya: Database & Model ORM Selanjutnya: Rikat UI Reaktif