Fungsi @apply dan Kapan Menggunakannya

Pendekatan Tailwind yang mengutamakan utilitas menempatkan semua gaya langsung pada elemen HTML. Untuk halaman sederhana, hal ini tidak masalah. Namun, ketika kombinasi 15 class utilitas yang sama muncul pada 50 elemen tombol, memperbarui satu detail desain mengharuskan Anda mengubah 50 tempat. Direktif @apply mengatasi masalah ini dengan memungkinkan Anda mengekstrak kombinasi utilitas yang sering diulang ke dalam satu class CSS khusus — tanpa meninggalkan sistem utilitas Tailwind.

@apply adalah direktif PostCSS yang diproses Tailwind selama kompilasi. Saat Tailwind menemukan @apply bg-blue-600 text-white font-semibold di dalam aturan CSS, Tailwind menyisipkan deklarasi CSS yang akan dihasilkan oleh utilitas tersebut. Aturan CSS yang dihasilkan berisi nilai properti sebenarnya, bukan nama class Tailwind. Hasil akhir yang dikirim ke peramban tidak lagi mengenal Tailwind atau @apply.

Gunakan @apply di dalam file CSS yang diproses oleh Tailwind. Selalu bungkus class komponen yang diekstrak dalam blok @layer components agar Tailwind menyisipkannya pada posisi yang benar dalam lembar gaya yang dihasilkan — setelah gaya dasar, tetapi sebelum class utilitas. Dengan demikian, class utilitas yang diterapkan langsung dalam HTML tetap dapat menimpa gaya class komponen Anda.

Situasi yang tepat untuk @apply bersifat terbatas dan spesifik. Gunakan saat: kombinasi utilitas yang sama muncul persis di 5 tempat atau lebih; komponen ditampilkan dalam konteks ketika Anda tidak dapat mengendalikan HTML (seperti konten yang dirender dari markdown atau komponen pihak ketiga); atau ketika keterbatasan kerangka kerja membuat logika kondisional berbasis class tidak praktis. Jika Anda dapat menggunakan komponen JSX, komponen Vue, atau bagian HTML, pilihan-pilihan tersebut hampir selalu lebih baik.

Kasus penggunaan praktis @apply mencakup: gaya dasar tombol yang digunakan bersama oleh banyak tombol, gaya reset input formulir yang diterapkan secara seragam, gaya tipografi untuk konten blog yang dirender dari markdown, serta class utilitas yang disisipkan dalam HTML komponen pihak ketiga yang tidak dapat Anda ubah. Dalam semua kasus ini, intinya adalah Anda tidak dapat menempatkan class utilitas langsung pada elemen HTML yang membutuhkannya.

Tailwind memiliki tiga lapisan: base, components, dan utilities. Gunakan @layer base untuk reset elemen dan bawaan global. Gunakan @layer components untuk class komponen yang diekstrak dan dibuat dengan @apply. Gunakan @layer utilities untuk class utilitas khusus dengan satu tujuan. Urutan lapisan memastikan class utilitas selalu menimpa class komponen, yang menimpa gaya dasar — sehingga hierarki kekhususan yang diharapkan tetap terjaga.

Anda dapat menggunakan pengubah status dan responsif di dalam @apply, sama seperti dalam HTML. Tulis hover:bg-blue-700, focus:ring-2, atau md:flex langsung dalam pernyataan @apply, lalu Tailwind membuat CSS berbasis pemilih yang benar. Inilah salah satu alasan @apply lebih kuat daripada menulis CSS secara manual — Anda mendapatkan seluruh sistem varian tanpa usaha tambahan.

Anda dapat merujuk class komponen lain yang dibuat dengan @apply di dalam @apply lainnya. Misalnya, tentukan class dasar .btn, lalu rujuk class tersebut dalam .btn-primary untuk mewarisi semua gaya dasar tombol. Ini membuat rangkaian pewarisan sederhana. Berhati-hatilah terhadap penumpukan yang terlalu dalam — hal itu menciptakan dependensi implisit yang sulit dilacak saat melakukan debug.

Dalam Vue Single File Components (SFC) dan beberapa pengaturan React dengan CSS Modules, Anda dapat menggunakan @apply di dalam blok <style> komponen. Dengan demikian, gaya komponen tetap berada bersama templatnya sekaligus tetap menggunakan utilitas Tailwind sebagai blok pembangun. Konfigurasikan bundler Anda untuk memproses blok gaya tersebut melalui PostCSS dengan plugin Tailwind agar @apply dapat digunakan.

Sebelum menggunakan @apply, selalu tanyakan: bisakah saya mengekstraknya menjadi komponen? Dalam React, ini berarti membuat komponen Button yang menerima prop variant. Dalam HTML, ini berarti menggunakan bagian atau penyertaan templat. Mengekstrak komponen biasanya lebih baik daripada @apply karena pendekatan ini eksplisit, mudah dicari, dan berfungsi dengan semua kerangka kerja. Gunakan @apply hanya ketika ekstraksi komponen tidak mungkin atau tidak praktis.

Setelah menulis aturan @apply, verifikasi bahwa aturan tersebut dikompilasi dengan benar dengan membangun CSS Anda dan memeriksa hasilnya. Cari nama class yang Anda buat dalam file CSS hasil kompilasi. Anda seharusnya melihat deklarasi CSS lengkap yang disisipkan — bukan sintaks @apply, karena sintaks tersebut dihapus selama kompilasi. Jika class tidak ada atau menampilkan properti yang tidak diharapkan, periksa penempatan @layer dan pastikan semua utilitas yang dirujuk merupakan class Tailwind yang valid.

Dalam pelajaran ini, Anda telah mempelajari: @apply menyisipkan CSS class utilitas ke dalam nama class khusus dan ideal untuk konten yang tidak dapat Anda tambahkan class secara langsung, selalu tempatkan class berbasis @apply di dalam @layer components untuk mempertahankan kekhususan yang tepat, dan ekstraksi komponen (JSX, Vue SFC, bagian HTML) biasanya lebih disarankan daripada @apply jika memungkinkan. Selanjutnya, kita akan membuat class komponen yang dapat digunakan kembali dengan @apply.