Pembantu Tailwind

Fitur Utama

Breakdown Kelas Terkategorisasi

Kelas Tailwind disusun ke dalam kategori yang jelas: Tata Letak (flex, grid, posisi), Spasi (padding, margin, gap), Tipografi (ukuran font, ketebalan, warna), Warna (latar belakang, teks, bingkai), Bingkai (radius, lebar, gaya), dan Efek (bayangan, opasitas, transformasi). Setiap kategori dapat diciutkan dan diberi label dengan jelas.

Klik Elemen Apa Pun untuk Memeriksa

Klik pada elemen apa pun — tombol, kartu, judul, input, kontainer — dan panel akan langsung terisi dengan breakdown kelas Tailwind lengkap. Elemen yang diperiksa akan disorot dengan garis tepi ungu agar Anda tahu persis apa yang sedang dianalisis.

Salin Kelas Individu

Setiap kelas Tailwind ditampilkan sebagai tag yang dapat diklik. Klik pada satu tag (seperti p-5 atau font-bold) untuk menyalin kelas tersebut saja ke clipboard Anda. Animasi "tersalin" yang halus akan mengonfirmasi tindakan tersebut. Sangat cocok saat Anda hanya butuh satu atau dua kelas spesifik.

Salin Semua Kelas Sekaligus

Tombol "Salin Semua Kelas" di bagian bawah menghasilkan string bersih yang dipisahkan spasi dari semua kelas Tailwind dan menyalinnya ke clipboard Anda. Siap untuk langsung ditempelkan ke className="..." atau class="...".

Pemetaan Skala yang Akurat

Setiap nilai dipetakan ke skala spasi dan ukuran default Tailwind. Font 16px dipetakan ke text-base, padding 24px ke p-6, dan warna #7c3aed ke purple-600. Jika tidak ada kecocokan persis, nilai skala terdekat akan dipilih dan diberi catatan.

Hover untuk Melihat Sumber CSS

Arahkan kursor ke tag kelas Tailwind mana pun di panel untuk melihat nilai CSS terhitung (computed CSS) asli dari mana kelas tersebut dihasilkan. Misalnya, mengarahkan kursor ke "p-5" akan memunculkan "padding: 20px". Tampilan dua arah ini membantu Anda mempelajari skala Tailwind dengan menghubungkan kelas ke nilai CSS nyata.

Apa yang Bisa Anda Periksa

Pembantu Tailwind covers the following, organized by category:

Kelas Tata Letak

flex
grid
block
inline-flex
relative
absolute
sticky
items-center
justify-between
gap-*

Kelas Spasi

p-* (padding)
m-* (margin)
px-* py-*
mx-auto
space-x-*
w-* h-*
max-w-*
min-h-*

Kelas Tipografi

text-sm / text-base / text-lg
font-normal / font-bold
leading-* (line-height)
tracking-* (letter-spacing)
text-center
uppercase

Kelas Warna

text-{color}-{shade}
bg-{color}-{shade}
border-{color}-{shade}
opacity-*

Kelas Bingkai

border
border-2
rounded-* (radius)
border-solid / dashed
divide-*

Kelas Efek

shadow-sm / shadow-md / shadow-lg
ring-*
transition
duration-*
hover:*

Kasus Penggunaan Umum

Memahami Gaya Lengkap Elemen

Berbeda dengan string kelas biasa, tampilan terkategorisasi memungkinkan Anda memahami komposisi lengkap suatu elemen. Lihat bahwa sebuah kartu menggunakan tata letak flex, padding spesifik, tipografi tebal, latar belakang slate, bingkai membulat, dan bayangan halus — masing-masing aspek di bagiannya sendiri.

Membangun Komponen Baru dari Referensi

Periksa elemen dengan desain yang bagus di situs web mana pun, lalu buat ulang di proyek Tailwind Anda dengan menyalin kelas kategori yang relevan. Ambil tata letak dari satu elemen, tipografi dari elemen lain, dan warna dari palet merek Anda — campur dan sesuaikan.

Mempelajari Sistem Penamaan Tailwind

Arahkan kursor ke tag kelas untuk melihat nilai sumber CSS. Pemetaan interaktif ini adalah cara tercepat untuk mempelajari bahwa p-4 berarti 16px, text-lg berarti 18px, atau purple-600 adalah #7c3aed. Ubah situs web mana pun menjadi latihan pembelajaran Tailwind.

Audit Penggunaan Tailwind di Situs Sendiri

Periksa elemen di situs yang Anda bangun dengan Tailwind untuk memastikan penggunaan spasi, warna, dan tipografi yang konsisten dari sistem desain. Temukan nilai satu kali (seperti p-[13px]) yang seharusnya menggunakan nilai skala standar (p-3 atau p-3.5).

Membandingkan Salin sebagai Tailwind vs Pembantu Tailwind

Gunakan Salin sebagai Tailwind saat Anda butuh string kelas cepat untuk ditempel. Gunakan Pembantu Tailwind saat Anda ingin mempelajari rinciannya, menyalin kelas individu secara selektif, atau memahami mengapa kelas Tailwind tertentu dipilih untuk setiap properti CSS.

Cara Menggunakan

Aktifkan Pembantu Tailwind

Buka dok mengambang DevSuite Pro dan klik ikon Pembantu Tailwind. Alat akan aktif dan sebuah panel akan muncul di sisi kanan, siap menampilkan breakdown kelas.

Klik Elemen untuk Memeriksa

Klik elemen apa pun di halaman. Elemen tersebut akan disorot dengan garis tepi ungu, dan panel akan terisi dengan kelas Tailwind yang terkategorisasi. Setiap kategori ditampilkan sebagai bagian dengan tag kelas masing-masing.

Jelajahi Kategori

Jelajahi berbagai kategori untuk memahami komposisi gaya lengkap elemen tersebut. Setiap kelas adalah tag yang dapat diklik — hover untuk melihat nilai sumber CSS, klik untuk menyalin kelas individu tersebut.

Salin yang Anda Butuhkan

Klik tag individu untuk menyalin kelas tertentu, atau gunakan tombol "Salin Semua Kelas" di bagian bawah untuk mengambil semuanya sebagai satu string tunggal. Tempelkan langsung ke komponen Tailwind Anda.

Klik Elemen Lain

Klik elemen lain di halaman untuk memperbarui panel secara instan dengan kelas-kelas baru. Tidak perlu mematikan dan mengaktifkan ulang — cukup terus klik untuk memeriksa beberapa elemen secara berurutan.