Setelah sebelumnya kita belajar membuat layout dengan CSS Native di MHFSDEV, mungkin Anda merasa menulis ribuan baris CSS untuk satu website cukup melelahkan. Nah, di sinilah Tailwind CSS hadir sebagai solusi.
Apa itu Tailwind CSS?
Berbeda dengan Bootstrap yang memberikan komponen jadi (seperti .btn, .card), Tailwind CSS adalah framework Utility-First. Artinya, Tailwind menyediakan kelas-kelas kecil (utility) yang masing-masing merepresentasikan satu properti CSS.
Contoh perbandingan:
CSS Native: Harus membuat class
.kotak-birulalu diisibackground-color: blue; padding: 20px;.Tailwind: Cukup tulis
class="bg-blue-500 p-5"langsung di HTML
Kenapa Harus Pakai Tailwind CSS?
Tidak Perlu Pindah File: Anda tidak perlu bolak-balik antara file HTML dan CSS.
Ukuran File Kecil: Tailwind hanya akan mengambil class yang Anda gunakan saja saat proses build.
Desain Konsisten: Tailwind sudah menyediakan palet warna dan sistem spacing (jarak) yang baku.
Mudah untuk Responsif: Cukup tambahkan prefix seperti
md:ataulg:pada class (Contoh:class="w-full md:w-1/2").
Cara Mencoba Tailwind CSS (Tanpa Instalasi Kompleks)
Bagi Anda yang ingin mencoba langsung di CodePen, Anda tidak perlu melakukan instalasi di laptop. Cukup tambahkan script Play CDN di bagian <head> HTML Anda:
Contoh Project Sederhana: Card Profil
Mari kita praktekkan membuat kartu profil sederhana hanya dengan beberapa baris class Tailwind:
Cara Instalasi Tailwind CSS untuk Proyek Serius
Jika Anda ingin membangun website profesional, menggunakan CDN tidak disarankan. Anda harus menggunakan Tailwind CLI. Berikut langkah ringkasnya:
1.Inisialisasi Proyek: Buka terminal di folder proyek Anda, lalu ketik:
2. Konfigurasi Jalur File:
Buka file tailwind.config.js dan atur jalurnya:
3. Masukkan Direktif Tailwind:
Buat file CSS (misal: input.css) dan isi dengan:
Kesimpulan
Tailwind CSS mungkin terasa aneh di awal karena HTML Anda akan terlihat "kotor" dengan banyak class. Namun, setelah terbiasa, kecepatan koding Anda akan meningkat drastis.
Tugas untuk Anda:
Coba salin kode "Card Profil" di atas ke CodePen, lalu ganti warna background (bg-blue-600) menjadi warna favorit Anda. Lihat betapa cepatnya perubahan tersebut terjadi!
0 Comments