Belajar Tailwind CSS - Composing Utilities — @apply, Components, dan Extracting Reusable Patterns

#Pendahuluan

Ketika pattern tertentu muncul berulang, kalian akan tergoda mengekstraknya menjadi satu kelas. Tailwind memberi @apply untuk itu. Tapi ada cara lain yang sering lebih baik: memakai template atau komponen di framework, atau mempertahankan utility inline. Episode 7 membantu kalian memutuskan kapan memakai yang mana.

Aturan emasnya: @apply bukanlah cara untuk "membersihkan" markup. Jika tujuannya hanya mengurangi panjang class attribute, lebih baik ekstrak ke komponen. @apply sebaiknya dipakai untuk aturan yang benar-benar lintas-komponen, atau ketika CSS kustom memang diperlukan.

#Kapan Menggunakan @apply vs Utilities Inline

Gunakan utility inline sebagai default — paling fleksibel, mudah di-override, dan tidak menambah ukuran file. Gunakan @apply ketika sekelompok utility yang sama muncul di banyak tempat dan sulit dikelola sebagai komponen:

Contoh @apply yang masuk akal

.card {
  @apply rounded-lg border border-gray-200 bg-white p-4 shadow-sm;
}

Dan hindari @apply untuk sesuatu yang hanya dipakai sekali — itu hanya memindahkan kelas dari markup ke CSS tanpa nilai tambah. Kriteria pemilihan yang bisa dipegang:

• Pola dipakai di banyak komponen berbeda.
• Gaya perlu disuntikkan ke elemen yang tidak bisa menerima class attribute dengan mudah.
• Kalian ingin mendefinisikan aturan bersama CSS kustom lain.

#Component Classes di Components Layer

#Menggunakan @layer components

Definisikan komponen di dalam @layer components agar berada di antara base dan utilities:

src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer components {
  .card {
    @apply rounded-lg border border-gray-200 bg-white p-4 shadow-sm;
  }
  .btn {
    @apply inline-flex items-center rounded px-4 py-2 font-medium;
  }
}

Layer components memastikan utility inline di markup tetap bisa menimpa gaya komponen, karena utilities selalu datang setelah components dalam urutan cascade. Pola @layer components ini menjaga hierarki tetap dapat diprediksi.

#Variasi dengan Utility Inline

Kelas komponen tidak menutup kemungkinan overrides langsung di markup:

Komponen dengan override

<button class="btn bg-blue-500 text-white hover:bg-blue-600">Simpan</button>
<button class="btn bg-gray-200 text-gray-800 hover:bg-gray-300">Batal</button>

btn menyediakan struktur dasar; bg-blue-500 dan kawan-kawan menimpa bagian yang bervariasi. Ini kombinasi paling sehat antara komposisi dan fleksibilitas.

#Komposisi Lanjutan dengan Variants dan Plugin

#Memakai Group dan Variants Bawaan

Tailwind menyediakan variants untuk interaksi kompleks tanpa JavaScript. Kelas group menandai parent, lalu group-hover: menyasar elemen anak saat parent di-hover:

Group hover

<div class="group p-4">
  <h3 class="group-hover:text-blue-600">Judul kartu</h3>
  <p class="opacity-0 transition group-hover:opacity-100">Detail muncul saat hover.</p>
</div>

group-hover:text-blue-600 menghubungkan state parent dan anak murni lewat CSS.

#Variants Kustom lewat Plugin

Jika variants bawaan tidak cukup, daftarkan variants sendiri:

Plugin variant kustom

const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant("optional", "&:optional");
      addVariant("rtl", "&:where([dir=rtl] *)");
    }),
  ],
};

Setelah registrasi, optional:border-gray-400 dan rtl:text-right bisa dipakai seperti variants bawaan. Detail penulisan plugin akan dibahas penuh di episode 9.

#Penutup

Episode 7 menjelaskan seni komposisi utility: memilih antara @apply dan utility inline, mendefinisikan component classes di @layer components, serta memakai variants bawaan dan custom untuk pattern yang dapat dipakai ulang.

Inti yang harus dibawa pulang:

• Utility inline adalah default; @apply untuk pattern lintas-komponen.
• @layer components menjaga komponen tetap bisa di-override utility.
• Kombinasi kelas komponen plus override inline adalah pola paling sehat.
• group dan group-hover menghubungkan state tanpa JavaScript.
• Variants custom didaftarkan lewat addVariant di plugin.
• Ekstrak ke komponen ketika pola muncul minimal tiga kali.

Di episode 8 selanjutnya kita akan menggali tailwind config secara mendalam — token granular seperti colors, spacing, borderRadius, dan fonts, penggunaan presets untuk sharing config antar project, serta safelist untuk menangani kelas dinamis yang tidak terdeteksi JIT.