Mengurai Benang Kusut: `@apply` & `@layer`
Kelemahan terbesar Tailwind (yang sering diserang oleh para pembencinya) adalah HTML yang sangat
kotor. Saat kamu membuat 5 buah tombol yang sama persis bentuknya di halaman web, melihat 20
rentetan class yang harus di-*copy-paste* berulang kali adalah mimpi buruk pengelolaan (*maintenance*).
Mari pelajari cara "Mengekstrak" rentetan panjang tersebut kembali menjadi satu class CSS tradisional dan
bersih (`.btn-utama`) dengan perlakuan spesial Tailwind Directives!
📂 1. Tiga Laci Penyimpanan: `@layer`
Saat menginstal Tailwind lewat CSS Murni (`style.css`), kita memasukkan 3 blok fondasi utama: `base`,
`components`, dan `utilities`. Jika kita ingin menyisipkan CSS khusus buatan kita sendiri, sangat
dilarang menaruhnya di tempat sembarangan! Gunakan blok @layer agar Tailwind
tahu kapan kode tersebut harus diproses dan dibersihkan.
@layer base { }
Tempat menaruh aturan wajib bagi Tag HTML murni. Contoh: Memaksa gaya dasar <h1>,
warna latar body, atau gaya huruf default (Typography).
@layer components { }
Rumah bagi elemen yang struktur visualnya raksasa dan diulang-ulang di berbagai halaman. Contoh
sesungguhnya: .btn-primary atau .card-produk.
@layer utilities { }
Tempat menaruh class ajaib yang bertugas melakukan satu tugas super spesifik (Utility). Contoh:
.scroll-ngumpet yang berisi kode rumit menghilangkan scrollbar browser.
🌪️ 2. Menyedot Deretan Class dengan `@apply`
Daripada harus mengetik berulang kali seperti <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 active:scale-95 transition-all shadow-md">
kelima kalinya,
kita bisa "menyedot" semua gaya ini ke dalam sebuah wadah class Semantic CSS lama bernama `.btn-utama` di dalam
file `style.css`!
Hasil Akhir di File HTML Web (Sangat Bersih!):
<button class="btn-utama">Daftar Sekarang</button>
Aturan Emas: Opsi Alternatif
Terlalu banyak memasukkan instruksi @apply artinya kamu secara perlahan mematahkan filosofi
asli (*Utility-first*) dari Tailwind itu sendiri (membawamu kembali ke gaya kuno BEM MVC).
Kapan sebaiknya memakai @apply?
- Saat menyuntikkan class bawaan ke file external / plugin (*Third Party libraries*) yang struktur tag HTML-nya tidak bisa diedit secara manusial (seperti Markdown Parser).
Bila kamu meggunakan React / Vue / PHP Components (Sangat Disarankan!)
- Alih-alih membuat class CSS
.btn-utamadengan@apply, cara arsitektur paling modern adalah mengekstrak seluruh kodenya menjad sebuah komponen independen React/PHP! - Nantinya di HTML, kamu cukup memanggilnya utuh seperti:
<Button variant="utama" />. Ekosistem komponen membebaskanmu dari keharusan merawat `.css` sama sekali.