jokowind
v1.0.0
Published
JavaScript runtime translator for Tailwind CSS utilities in Bahasa Indonesia
Maintainers
daffaaditypReadme
JokoWind
JokoWind adalah sebuah pustaka JavaScript runtime translator yang memungkinkan Anda menulis kelas utilitas Tailwind CSS menggunakan Bahasa Indonesia. Kelas-kelas tersebut akan diterjemahkan secara otomatis ke kelas Tailwind CSS standar langsung di browser.
Proyek ini bertujuan untuk eksperimen dan mempermudah pengenalan Tailwind CSS bagi developer Indonesia.
Instalasi
Anda bisa menggunakan JokoWind melalui CDN atau menginstalnya via npm.
via CDN
Sertakan script berikut sebelum tag penutup </body> pada file HTML Anda:
<script src="https://cdn.jsdelivr.net/npm/jokowind/jokowind.js"></script>via npm
Install paketnya menggunakan npm:
npm install jokowindKemudian, impor dan jalankan di file JavaScript utama Anda:
import 'jokowind';Contoh Penggunaan
Setelah menyertakan script, Anda bisa langsung menulis kelas utilitas Tailwind dalam Bahasa Indonesia pada atribut class di elemen HTML Anda.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh JokoWind</title>
<!-- Sertakan juga file CSS Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="wadah mx-auto p-8 latar-abu-100 bulat-xl bayangan-lg">
<h1 class="teks-3xl font-tebal garis-bawah dekorasi-biru-500">
Halo, Dunia!
</h1>
<p class="mt-4 teks-abu-700">
Ini adalah contoh penggunaan JokoWind untuk styling dengan Tailwind CSS berbahasa Indonesia.
</p>
<button class="mt-6 px-4 py-2 bg-biru-500 teks-putih bulat-md hover:bg-biru-600 fokus:kerangka-luar-kosong">
Tombol Keren
</button>
</div>
<!-- Sertakan JokoWind di sini -->
<script src="jokowind.js"></script>
</body>
</html>Cara Kerja
JokoWind menggunakan MutationObserver untuk memantau perubahan pada DOM. Ketika elemen baru ditambahkan atau atribut class diubah, script akan memindai kelas-kelas berbahasa Indonesia dan menerjemahkannya ke kelas Tailwind CSS yang sesuai. Proses ini terjadi di sisi klien (browser) secara real-time.
Disclaimer
Proyek ini adalah proyek independen dan tidak berafiliasi dengan, didukung oleh, atau terhubung dengan tokoh publik manapun. Nama "JokoWind" adalah plesetan dari "Tailwind" dan dipilih untuk tujuan branding yang unik dan mudah diingat dalam konteks developer Indonesia.