⌘K

Command Palette

Search for a command to run...

Daftar

Custom Utility Tailwind (@utility)

Perlu utility class yang lebih spesifik? Pelajari cara mendefinisikan class utility kustom Anda sendiri di Tailwind CSS v4 menggunakan directive `@utility`, lengkap dengan dukungan varian.

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.
  • Kelebihan Utama:
    • Class utility yang kamu bikin pake @utility ini bakal otomatis bisa dipake bareng semua varian Tailwind (kayak hover:, focus:, md:, dark:, dll.) tanpa perlu konfigurasi tambahan! Ini beda signifikan sama bikin class biasa terus di-@apply di v3 yang variannya kadang gak otomatis dapet.
    • Kodenya jadi lebih terintegrasi sama "cara berpikir" Tailwind.

Sintaks Dasar @utility:

css
/* Di dalem blok <style type="text/tailwindcss"> atau file CSS utama */
 
@utility nama-utility-kustom-kamu {
  properti-css-1: nilai-1;
  properti-css-2: nilai-2;
  /* ... bisa juga pake @apply di sini kalau mau gabungin utility lain ... */
}
 
/* Atau shortcut-nya: */
@u nama-utility-lain {
  /* ... style ... */
}
  • nama-utility-kustom-kamu: Ini bakal jadi nama class yang kamu pake di HTML (tanpa titik di depannya pas dipake di HTML). Misalnya, kalau kamu definisiin @utility tab-highlight, di HTML kamu pake class="tab-highlight".

Contoh Penggunaan @utility Sederhana:

Misalnya, kita sering banget butuh style buat teks yang jadi "tombol aksi" tapi bukan tombol beneran (misal, link yang tampilannya kayak tombol teks).

html
<head>
  <!-- ... meta tags dan skrip CDN Tailwind ... -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  
  <style type="text/tailwindcss">
    @theme {
      /* ... kustomisasi tema kalau ada ... */
      --color-brand-accent: oklch(0.7 0.15 280); /* Ungu aksen */
    }
 
    @utility text-action-button {
      color: var(--color-brand-accent);
      font-weight: 600; /* font-semibold */
      text-decoration-line: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
    }
 
    @utility smooth-shadow {
      /* Contoh utility yang isinya @apply dari utility Tailwind lain */
      /* (Perhatian: Penggunaan @apply di dalam @utility saat mode browser mungkin perlu dicek perilakunya di v4) */
      /* Alternatifnya, langsung tulis properti CSS-nya: */
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
      /* Yang di atas itu sama kayak shadow-md nya Tailwind */
      transition-property: box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }
  </style>
</head>
<body class="max-w-md mx-auto">
  <a href="#" class="text-action-button hover:opacity-80">Baca Selengkapnya</a>
  <p>
    Teks biasa, lalu ada 
    <span class="text-action-button dark:text-yellow-400">link aksi penting</span> 
    di tengah kalimat.
  </p>
 
  <div class="p-4 m-4 bg-white rounded-lg smooth-shadow hover:shadow-xl">
    Kartu dengan shadow custom yang smooth
  </div>
</body>

Di contoh ini:

  • Kita bikin utility kustom text-action-button yang ngasih warna ungu aksen, tebel, dan garis bawah putus-putus.
  • Kita bisa langsung pake class="text-action-button" di elemen <a> atau <span>.
  • Dan yang keren, kita bisa gabungin sama varian lain, kayak dark:text-yellow-400 di <span> (artinya, pas dark mode, text-action-button khusus buat span itu warnanya jadi kuning, tapi properti lain dari text-action-button tetep kepake).
  • smooth-shadow adalah contoh lain, yang bahkan bisa dikombinasikan dengan hover:shadow-xl (utility bawaan Tailwind) untuk mengubah bayangannya saat hover.

Menggunakan @apply di Dalam @utility (Dengan Catatan)

Tailwind v4 masih mendukung @apply yang bisa kamu pake di dalem blok @utility kalau kamu mau ngerangkai beberapa utility class Tailwind yang udah ada jadi satu utility kustom baru.

css
@utility btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md shadow-sm;
  /* Tambahin style kustom lain kalau perlu */
  border: 1px solid transparent; /* Contoh properti tambahan */
}

Di HTML: <button class="btn-primary">Tombol Utama</button>

Perhatian Penting soal @apply di Mode Browser (@tailwindcss/browser):

  • Fungsionalitas @apply saat menggunakan @tailwindcss/browser (mode CDN) mungkin punya beberapa batasan atau perilaku yang berbeda dibandingkan saat menggunakan setup build tool lengkap. Skrip browser melakukan kompilasi on-the-fly, dan beberapa fitur kompleks mungkin tidak sepenuhnya didukung atau dioptimalkan seperti pada build-time.
  • Untuk utility kustom yang lebih kompleks atau sangat bergantung pada @apply banyak utility, selalu lebih baik dan lebih terjamin hasilnya jika kamu menggunakan setup Tailwind dengan build process (PostCSS, Vite, Tailwind CLI).
  • Jika ragu, menulis properti CSS secara eksplisit di dalam @utility (seperti contoh text-action-button pertama) adalah cara yang lebih pasti berhasil di mode browser.

Kapan Sebaiknya Bikin Custom Utility?

Meskipun Tailwind ngedorong kita buat ngerangkai utility langsung di HTML, ada beberapa situasi di mana bikin custom utility pake @utility itu berguna:

  1. Pola Utility yang Sangat Sering Diulang: Kalau kamu nemu ada kombinasi 5-10 utility class yang selalu kamu pake barengan di banyak tempat, ngekstraknya jadi satu custom utility bisa bikin HTML-mu lebih bersih.

    • Contoh: Style dasar buat semua "kartu" di websitemu.

  2. Butuh Abstraksi Kecil: Kadang kamu pengen ngasih nama yang lebih "semantik" ke sekumpulan style, meskipun di baliknya itu cuma rangkaian utility.

    • Contoh: @utility input-error { @apply border-red-500 text-red-700 ...; }

  3. Menggunakan Properti CSS yang Belum Ada Utility Bawaannya: Kalau ada properti CSS langka atau baru yang belum dicover sama utility Tailwind, kamu bisa bikin utility-nya sendiri.

  4. Gradual Adoption di Proyek Lama: Kalau kamu mau ngenalin Tailwind ke proyek yang udah ada CSS-nya, kamu bisa pelan-pelan bikin custom utility yang "mbungkus" style lama atau ngombinasiin sama utility Tailwind.

Tapi, Jangan Terlalu Cepet Bikin Custom Utility!

  • Salah satu kekuatan Tailwind adalah kamu bisa ngubah desain langsung di HTML tanpa perlu loncat ke file CSS. Kalau kamu terlalu banyak bikin custom utility (kayak bikin class komponen CSS biasa), kamu bisa kehilangan sebagian manfaat itu.
  • Prinsipnya: Coba dulu sebisa mungkin pake utility bawaan Tailwind. Baru bikin custom utility kalau emang ada pola yang berulang banget atau butuh abstraksi yang jelas. Jangan bikin custom utility buat tiap elemen kecil.

Custom Utility vs. Komponen Framework JS

Kalau kamu pake framework JavaScript kayak React, Vue, atau Svelte, kamu juga bisa bikin komponen UI yang udah punya class-class Tailwind di dalemnya.

  • Custom Utility Tailwind (@utility): Fokusnya bikin satu class CSS baru yang bisa dipake di elemen HTML mana aja, dan bisa dikombinasiin sama varian (hover:, md:, dll.).
  • Komponen Framework JS (misal, <ButtonPrimary> di React): Ini ngebungkus struktur HTML + class Tailwind (dan mungkin logika JS) jadi satu unit yang bisa dipake ulang.

Keduanya bisa dipake barengan. Kamu bisa bikin custom utility buat style dasar, terus pake utility itu (atau utility Tailwind bawaan) di dalem komponen React/Vue-mu.

Directive @utility di Tailwind CSS v4.0 ngasih kita cara yang rapi dan terintegrasi buat nambahin "jurus" styling kita sendiri ke dalam ekosistem Tailwind, lengkap dengan dukungan varian otomatis.

Gunakan dengan bijak buat ngejaga kodemu tetep DRY (Don't Repeat Yourself) dan HTML-mu gak terlalu "penuh sesak" sama class, tapi jangan sampe kamu malah balik lagi bikin CSS kayak sebelum kenal utility-first ya! Keseimbangan itu kuncinya.

Kuis Custom Utility Tailwind (@utility)

Pertanyaan 1 dari 4

Directive apa di Tailwind CSS v4.0 yang digunakan untuk mendefinisikan class utility kustom baru langsung di file CSS Anda, yang secara otomatis akan mendapatkan dukungan varian (seperti hover, md, dll.)?