dokumen
Dokumentasi Frutjam — instalasi, konfigurasi, tema, warna, dan tipografi. Tailwind CSS v4 khusus CSS, tanpa JavaScript, WCAG AA dapat diakses. Bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Dokumen ini mencakup semua yang Anda perlukan mulai dari proyek Tailwind CSS v4 baru hingga UI bertema penuh dan dapat diakses. Mulailah dengan Installation — dua baris CSS — lalu jelajahi cara kerja sistem tema menggunakan variabel CSS dan satu atribut data-theme. Sistem warna menggunakan token OKLCH semantik yang secara otomatis memenuhi rasio kontras WCAG AA tanpa memerlukan pemeriksaan warna manual. Opsi konfigurasi memungkinkan Anda melingkupi token, menambahkan awalan untuk menghindari konflik, atau hanya memilih komponen yang Anda perlukan untuk menjaga output CSS Anda tetap ramping.
Warna
Sistem warna Frutjam menggunakan token CSS semantik yang dirancang untuk memenuhi rasio kontras WCAG AA yang siap pakai. Tanpa JavaScript, mendukung mode gelap, kompatibel dengan Tailwind CSS v4. Bekerja dengan Django, HTMX, Laravel, dan tumpukan khusus CSS apa pun.
Ringkasan
Frutjam adalah pustaka UI Tailwind CSS v4 UI gratis khusus CSS. Tanpa JavaScript, WCAG AA/AAA dapat diakses, tanpa kerangka kerja. Bangun antarmuka modern dengan komponen semantik yang bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Tema
Sistem tema khusus CSS Frutjam menggunakan variabel CSS dan atribut data tunggal. Ganti tema terang, gelap, dan khusus tanpa JavaScript. Token warna WCAG AA bawaan, berfungsi dengan Django, HTMX, Laravel, dan proyek Tailwind CSS v4 apa pun.
Instalasi
Instal Frutjam, pustaka Tailwind CSS UI khusus CSS, dalam hitungan menit. Dua impor, tanpa JavaScript, komponen yang dapat diakses WCAG secara langsung. Bekerja dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.
Konfigurasi
Konfigurasikan plugin Tailwind CSS khusus Frutjam CSS. Tetapkan tema default, tentukan token warna khusus, alihkan sistem awalan - tidak diperlukan JavaScript. Default WCAG dapat diakses, bekerja dengan Django, HTMX, Laravel, dan kerangka kerja apa pun.
Tipografi
Sistem tipografi khusus CSS Frutjam. Penskalaan teks HTMX semantik dengan Tailwind CSS v4, dapat diakses WCAG, tidak memerlukan JavaScript. Bekerja dengan Django, HTMX, Laravel, React, dan kerangka kerja apa pun.
Di mana untuk memulai
Baru mengenal Frutjam? Ikuti jalur ini untuk beralih dari nol ke proyek Tailwind CSS v4 yang bertema penuh dan dapat diakses.
- 1Instalasi
Instal paket npm dan tambahkan dua baris ke CSS Anda. Tidak ada konfigurasi JavaScript, tidak ada plugin PostCSS.
- 2Ringkasan
Pahami cara kerja Frutjam bersama utilitas Tailwind CSS, kelas komponen semantik, dan token warna WCAG AA.
- 3Tema
Terapkan tema bawaan atau buat tema Anda sendiri dengan variabel CSS dan satu atribut
data-theme. - 4Warna
Pelajari cara kerja token warna semantik dan bagaimana setiap pasangan
on-{color}menjamin kontras WCAG AA secara otomatis. - 5Konfigurasi
Tetapkan awalan, token cakupan ke elemen root, komponen pilihan, atau integrasikan bersama kerangka CSS lainnya.
Pertanyaan yang sering diajukan
Apakah Frutjam memerlukan Tailwind CSS v4?
Ya — Frutjam dibuat untuk Tailwind CSS v4 dan menggunakan arahan @plugin yang diperkenalkan di v4. Ini tidak kompatibel dengan Tailwind CSS v3. Jika Anda masih menggunakan v3, tingkatkan ke v4 terlebih dahulu menggunakan panduan migrasi resmi Tailwind.
Apakah Frutjam gratis dan open source?
Ya — pustaka komponen inti Frutjam gratis dan bersumber terbuka (berlisensi MIT). Paket Pro dan Tim menambahkan blok UI premium, templat, dan permintaan Cherry MCP tanpa batas untuk integrasi editor AI.