Bikin "Jurus" Utility Sendiri di Tailwind: Kenalan Sama @utility!

Udah jago ngerangkai utility class bawaan Tailwind buat bikin desain? Keren! Tapi, kadang kita nemu pola style tertentu yang sering banget kita pake berulang-ulang, dan rasanya pengen dijadiin satu class utility sendiri biar lebih ringkes. Atau, mungkin ada properti CSS spesifik yang belum ada utility-nya di Tailwind secara default.

Di Tailwind CSS v3, kita sering pake directive @apply di dalem class CSS biasa buat "ngopi" serangkaian utility ke class itu. Nah, di Tailwind CSS v4.0, ada cara baru yang lebih terstruktur dan "Tailwind-banget" buat bikin class utility kustom: yaitu pake directive @utility.

Apa Itu Directive @utility?

Directive @utility (atau bisa juga ditulis @u sebagai shortcut) dipake buat ngedaftarin class utility kustom baru langsung di file CSS-mu (yang diproses sama Tailwind, misalnya di dalem blok <style type="text/tailwindcss"> pas pake CDN, atau di file CSS utamamu pas pake build tool).

• Cara Kerja: Kamu definisiin nama class utility kustommu, terus di dalemnya kamu tulis properti-properti CSS yang mau diterapin sama utility itu.