Halo teman-teman semuanya, setelah kita mempelajari berbagai fitur dan utilitas yang disediakan oleh Tailwind CSS, mulai dari utility-first, responsive design, hingga extend theme, kini saatnya kita menutup seri dasar ini dengan beberapa tips dan praktik terbaik agar penggunaan Tailwind lebih optimal, rapi, dan skalabel.
Tailwind memang sangat fleksibel dan cepat digunakan, tetapi tanpa pendekatan yang baik, struktur HTML kita bisa menjadi sulit dibaca atau tidak konsisten.
1. Gunakan Class Secukupnya
Salah satu keunggulan Tailwind adalah kemampuannya untuk mengatur tampilan hanya dengan menambahkan utility class. Namun, jangan sampai HTML kita jadi penuh dengan class yang berlebihan.
Tips: Gabungkan class yang punya fungsi sama atau gunakan component extraction bila perlu.
<!-- Kurang rapi -->
<button class="px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded shadow-md hover:shadow-lg transition-all duration-300">
Submit
</button>
<!-- Lebih rapi dengan extract ke komponen -->
<button class="btn-primary">Submit</button>
2. Gunakan Tools Seperti @apply untuk Ekstraksi Komponen
Dalam proyek yang menggunakan build system, kita bisa membuat class kustom dengan direktif @apply agar kode HTML lebih bersih.
/* style.css */
.btn-primary {
@apply px-4 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded shadow-md hover:shadow-lg transition;
}
Lalu di HTML:
<button class="btn-primary">Simpan</button>
3. Konsisten Penulisan Class
Agar struktur tetap mudah dibaca:
- Gunakan urutan class secara konsisten: posisi > ukuran > warna > animasi.
- Pisahkan kelompok class berdasarkan fungsi visual.
<!-- Urutan baik -->
<div class="flex items-center justify-between p-4 bg-white shadow rounded-lg">
4. Manfaatkan Plugin Resmi Tailwind
Tailwind menyediakan berbagai plugin resmi seperti:
@tailwindcss/forms@tailwindcss/typography@tailwindcss/aspect-ratio
Plugin ini memperkaya utilitas tanpa harus menulis CSS tambahan.
5. Gunakan Dark Mode & Variabel Desain
Dalam Tailwind v4, kita bisa menggunakan @theme untuk membuat token desain langsung di file CSS. Ini memudahkan kita membangun UI yang konsisten dan siap dark mode.
@theme {
--color-primary: hsl(210 100% 50%);
}
Kesimpulan
Tailwind CSS memberikan kebebasan dan kecepatan dalam membangun antarmuka web. Namun, agar proyek tetap terstruktur, efisien, dan mudah dikelola, penting bagi kita untuk mengikuti praktik terbaik seperti menggunakan @apply, menjaga konsistensi penulisan, serta memanfaatkan plugin dan konfigurasi tema.
Dengan mengikuti tips ini, kita akan lebih siap membangun proyek nyata menggunakan Tailwind CSS yang skalabel dan profesional.
Terima kasih telah mengikuti seri Belajar Tailwind CSS Dasar. Semoga bermanfaat dan sampai jumpa di seri lanjutan lainnya!