TailwindCSS

Dilema Tailwind: Antara Utility-First dan Kemudahan Tim Backend

Sebagai frontend engineer yang sudah lama jatuh cinta dengan Tailwind CSS, saya selalu menikmati kemudahan dan fleksibilitas yang ditawarkannya. Utility-first approach yang diusung Tailwind memungkinkan saya membangun UI dengan cepat tanpa harus menulis banyak CSS custom. Namun, ketika harus bekerja sama dengan tim backend dan menyerahkan template ke mereka, saya dihadapkan dengan tantangan baru.

Masalah: Utility-First vs. Kemudahan Backend

Dalam workflow saya, saya biasanya mengembangkan template frontend menggunakan Tailwind, lalu menyerahkannya ke tim backend yang akan melakukan slicing ke dalam framework mereka, misalnya Laravel Blade. Masalah muncul ketika:

  1. Markup HTML Menjadi Terlalu Panjang Karena Tailwind berbasis utility-first, class-class yang digunakan dalam elemen HTML bisa sangat panjang. Ini membuat kode sulit dibaca dan dikelola oleh tim backend yang harus menyusun ulang dalam template engine mereka.
  2. Perubahan Desain Menyulitkan Backend Misalnya, jika ada perubahan pada komponen seperti card, di mana padding dan border-radius perlu disesuaikan, saya harus memperbarui utility class di HTML. Ini berarti tim backend tidak hanya harus mengganti file CSS yang saya berikan, tetapi juga harus mengubah template Blade mereka untuk mencocokkan class baru yang saya gunakan.

Solusi: Menggunakan @layer components

Untuk mengatasi masalah ini, saya tetap menggunakan Tailwind, tetapi dengan pendekatan yang lebih terstruktur dengan @layer components. Dengan cara ini, saya masih bisa memanfaatkan kemudahan Tailwind, namun tanpa mengorbankan kemudahan implementasi bagi tim backend.

Contoh Implementasi:

Kemudian, di HTML saya cukup menulis:

Keuntungan Pendekatan Ini:

  • Markup lebih bersih dan lebih mudah dibaca oleh tim backend.
  • Jika ada perubahan desain, cukup edit CSS tanpa menyentuh template Blade.
  • Masih tetap memanfaatkan Tailwind tanpa kehilangan fleksibilitasnya.

Kesimpulan

Bekerja dengan Tailwind memang menyenangkan, tetapi dalam lingkungan kerja yang melibatkan tim backend, kita juga harus mempertimbangkan bagaimana mereka akan menggunakan template yang kita buat. Dengan pendekatan @layer components, saya bisa tetap menikmati efisiensi Tailwind tanpa membuat tim backend kesulitan.