Pemasangan

Berkas apa saja yang dikirim, urutan pemuatannya, dan cara memasangnya di proyek yang sudah jalan.

Berkas yang perlu dikirim

Berkas	Wajib	Isi
themekit/classroom.css	Ya	Seluruh gaya: token → reset → tata letak → komponen → utilitas → cetak
themekit/classroom.js	Ya	Perilaku: tema, modal, dropdown, tab, akordeon, toast, laci, tabel urut
themekit/fonts/	Ya	Font Inter varian sendiri (61 KB) + `fonts.css`
tokens/tokens.css	Tidak langsung	Sudah di-`@import` oleh `classroom.css`
tokens/tokens.json	Tidak	Nilai token untuk perkakas (Figma, skrip, dokumentasi)
tokens/tailwind.preset.js	Tidak	Preset bila proyek lama masih memakai Tailwind
index.html	Tidak	Halaman pratinjau — boleh tidak ikut dikirim ke produksi
docs/	Tidak	Dokumentasi ini — boleh tidak ikut dikirim

Urutan pemuatan

Urutannya penting dan hanya ada satu urutan yang benar.

<head>
  <link rel="stylesheet" href="themekit/classroom.css">   <!-- 1. gaya, sebelum konten -->
  <script src="themekit/classroom.js" defer></script>      <!-- 2. perilaku, setelah dokumen -->
</head>

Jangan lupa defer

Tanpa defer, skrip berjalan sebelum markup ada dan tidak ada satu pun komponen yang terpasang. Jangan pula memuatnya dua kali — pendengar peristiwa akan terpasang ganda.

Memasang di proyek Next.js yang sudah ada

Aplikasi aslinya Next.js + Tailwind. Kit ini bisa hidup berdampingan tanpa menyentuh Tailwind.

1
Salin folder
Taruh themekit/ dan tokens/ ke dalam public/.
2
Muat di layout
Di app/layout.tsx, tambahkan <link rel="stylesheet" href="/themekit/classroom.css"> dan skrip dengan defer.
3
Pakai di halaman baru
Tulis kelas ck- langsung di JSX. Tidak ada konflik dengan kelas Tailwind yang sudah ada.
4
Pindahkan bertahap
Halaman lama tetap berjalan. Pindahkan satu halaman sekali waktu, lihat Migrasi.

Kenapa lewat public/

Kalau berkasnya diimpor lewat bundler, urutan CSS jadi ditentukan bundler dan token bisa tertimpa Tailwind. Sebagai berkas statis di public/, urutannya pasti dan mudah dicabut kalau bermasalah.

Hosting di Cloudflare Pages

Situs statis murni, jadi cukup unggah foldernya. Berkas _headers yang disertakan mengatur cache:

/themekit/fonts/*
  Cache-Control: public, max-age=31536000, immutable

/themekit/classroom.css
  Cache-Control: public, max-age=3600

Font boleh di-cache setahun karena namanya berubah bila isinya berubah. CSS dan JS cukup satu jam supaya perbaikan cepat terlihat.

Menyematkan di halaman lain

Halaman di luar struktur folder ini cukup menyesuaikan jalur relatifnya. Contoh dari dalam subfolder:

<link rel="stylesheet" href="../themekit/classroom.css">
<script src="../themekit/classroom.js" defer></script>

Jalur di dalam CSS (@import token dan font) selalu relatif terhadap berkas CSS, jadi tidak perlu diubah.

Yang harus dihindari

Jangan	Sebab
Memuat `tokens/tokens.css` terpisah	Token ditulis dua kali; urutan bisa membalik nilai
Mengimpor `classroom.css` ke dalam bundler bersama Tailwind	Urutan CSS jadi tidak pasti, token bisa tertimpa
Menyunting `classroom.css` untuk satu halaman	Perubahan itu akan ikut ke semua halaman. Tambahkan token atau komponen baru
Menyalin gaya dari halaman pratinjau ke berkas gaya baru	Itulah cara sistem desain terpecah menjadi dua