Cara Menjaga Kerapian Kode Saat Menggunakan Tailwind CSS

Tailwind CSS dikenal sebagai framework utility-first yang memungkinkan developer membangun tampilan antarmuka dengan cepat hanya menggunakan kelas-kelas kecil seperti flex, text-center, bg-blue-500, atau p-4. Pendekatan ini membuat proses styling menjadi sangat efisien dan fleksibel. Namun, di sisi lain, penggunaan banyak class langsung di dalam tag HTML dapat menyebabkan kode menjadi panjang dan sulit dibaca, terutama pada proyek besar atau tim dengan banyak developer. Maka dari itu, penting bagi kita untuk memahami bagaimana menjaga kerapian kode saat menggunakan Tailwind CSS agar tetap mudah dipelihara tanpa kehilangan kecepatan pengembangan yang menjadi keunggulannya.

Tutorial ini akan membahas panduan lengkap, mulai dari prinsip dasar penulisan hingga teknik lanjutan seperti component extraction dan configuration optimization.

Mengapa Tailwind CSS Cenderung Terlihat “Berantakan”?

Salah satu kritik yang sering muncul terhadap Tailwind adalah “HTML jadi berantakan.”
Contoh sederhana berikut mungkin terlihat familiar:

<div class="bg-white shadow-md rounded-lg p-6 flex items-center justify-between border border-gray-200 hover:bg-gray-50 transition duration-200">
  <h2 class="text-xl font-semibold text-gray-800">Judul Kartu</h2>
  <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Klik Saya</button>
</div>

Sekilas memang tampak penuh dan sulit dibaca.
Namun, sebenarnya, bukan Tailwind-nya yang membuat kode berantakan, melainkan cara penulisannya. Dengan strategi yang tepat, kamu tetap bisa menjaga kode tetap rapi, efisien, dan profesional.

Gunakan Konvensi Penulisan Kelas yang Konsisten

Hal pertama yang perlu dilakukan adalah menetapkan urutan dan struktur class yang konsisten. Misalnya, gunakan urutan logis seperti berikut:

Urutan layout: flex, grid, block
Urutan spacing: p-*, m-*
Urutan warna dan background: bg-*, text-*
Urutan efek: shadow-*, hover:*, transition

Contoh penerapannya:

<div class="flex items-center justify-between p-4 bg-white shadow rounded hover:bg-gray-50 transition">

Dengan pola ini, tim kamu akan lebih mudah membaca dan memahami struktur komponen tanpa perlu menebak-nebak urutan styling.

Tips: Gunakan ekstensi seperti Tailwind CSS IntelliSense di VS Code agar urutan class lebih mudah dikelola dan mendapatkan saran otomatis.

Manfaatkan Fitur Prettier + Plugin Tailwind CSS

Untuk menjaga kerapian secara otomatis, kamu bisa menggunakan Prettier dengan plugin prettier-plugin-tailwindcss.
Plugin ini akan mengatur ulang urutan class Tailwind CSS secara otomatis berdasarkan aturan resmi dari Tailwind.

Langkah-langkah Instalasi:

npm install -D prettier prettier-plugin-tailwindcss

Lalu buat file .prettierrc di root proyek kamu:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Setelah itu, setiap kali kamu menyimpan file (Ctrl + S), Prettier akan otomatis merapikan urutan class sesuai standar.
Hasilnya, HTML kamu akan selalu bersih dan mudah dibaca tanpa harus menatanya secara manual.

Gunakan Komponen Reusable (Extract Component)

Salah satu kelebihan Tailwind adalah kamu bisa membuat komponen kustom dari class-class utilitas yang sering digunakan.

Misalnya kamu sering membuat tombol seperti ini:

<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition">Simpan</button>

Daripada menulis ulang setiap kali, kamu bisa membuat reusable component seperti berikut (menggunakan framework seperti React, Vue, atau Blade Component di Laravel):

Contoh di React:

export default function Button({ children }) {
  return (
    <button className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition">
      {children}
    </button>
  );
}

Lalu gunakan di mana saja:

<Button>Simpan</Button>

Dengan cara ini, kode menjadi lebih bersih dan konsisten di seluruh proyek.

Gunakan @apply di File CSS

Jika kamu tidak menggunakan framework JS, kamu tetap bisa menjaga kerapian HTML dengan menggunakan direktif @apply dalam file CSS Tailwind.

Contoh:

/* file: styles.css */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded transition;
}

Kemudian di HTML:

<button class="btn-primary">Simpan</button>

Teknik ini sangat berguna untuk proyek besar yang menggunakan banyak elemen serupa.
Namun, gunakan dengan bijak — karena jika terlalu sering, kamu justru kehilangan semangat utility-first yang menjadi kekuatan Tailwind.

Pisahkan Struktur HTML dan Logika

Kerapian kode tidak hanya soal tampilan, tetapi juga soal pemisahan tanggung jawab (separation of concerns).
Jika kamu menggunakan Tailwind di framework seperti React, Vue, atau Laravel Blade, hindari mencampur logika dengan markup berlebihan.

Contoh yang buruk:

<button
  className={`${isActive ? 'bg-blue-600' : 'bg-gray-400'} text-white py-2 px-4 rounded`}
>
  {isActive ? 'Aktif' : 'Nonaktif'}
</button>

Solusi yang lebih rapi:

const buttonClass = isActive
  ? 'bg-blue-600 hover:bg-blue-700'
  : 'bg-gray-400 hover:bg-gray-500';

<button className={`${buttonClass} text-white py-2 px-4 rounded transition`}>
  {isActive ? 'Aktif' : 'Nonaktif'}
</button>

Dengan memisahkan logika dari struktur, kamu akan lebih mudah memelihara kode seiring bertambahnya kompleksitas aplikasi.

Gunakan Variabel Kustom di Tailwind Config

Tailwind menyediakan file konfigurasi tailwind.config.js yang bisa kamu gunakan untuk membuat design system agar konsisten di seluruh proyek.

Contoh:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#9333EA',
      },
    },
  },
};

Kemudian di HTML:

<button class="bg-primary text-white px-4 py-2 rounded">Mulai Sekarang</button>

Dengan cara ini, kamu tidak perlu menulis kode warna berulang seperti bg-blue-600 di banyak tempat.
Hasilnya: kode lebih pendek, lebih rapi, dan mudah diubah secara global.

Kelompokkan Elemen Menggunakan Komentar

Pada proyek besar, kamu mungkin memiliki banyak section dalam satu halaman. Gunakan komentar agar struktur HTML mudah dinavigasi.

<!-- ================= HERO SECTION ================= -->
<section class="bg-gray-50 py-10">...</section>

<!-- ================= FEATURES SECTION ================= -->
<section class="py-10 bg-white">...</section>

<!-- ================= FOOTER ================= -->
<footer class="bg-dark text-white py-6">...</footer>

Meskipun sederhana, teknik ini sangat membantu menjaga struktur kode tetap terorganisir.

Review dan Refactor Secara Berkala

Kerapian kode tidak datang sekali jadi — ia perlu dipelihara secara rutin.
Sisihkan waktu khusus untuk meninjau ulang (review) kode Tailwind kamu setiap minggu atau setiap rilis versi besar.

Periksa:

Apakah ada class berulang yang bisa dijadikan komponen?
Apakah urutan class sudah konsisten?
Apakah file CSS terlalu besar karena penggunaan @apply berlebihan?

Refactor secara berkala akan menjaga kualitas proyek tetap tinggi.

Kesimpulan

Tailwind CSS memang sangat cepat dan fleksibel, tetapi tanpa aturan penulisan yang baik, kode kamu bisa cepat “berantakan.”
Dengan menerapkan strategi di atas — mulai dari penulisan class yang konsisten, penggunaan Prettier, ekstraksi komponen, hingga penggunaan konfigurasi Tailwind — kamu dapat menjaga kerapian dan efisiensi proyek tetap maksimal.

Ingat, tujuan utama Tailwind bukan hanya membuat tampilan cepat, tapi juga menciptakan kode yang bersih, efisien, dan mudah dipelihara di jangka panjang.