Tailwind CSS Academy · Pelajaran

Fungsi @apply dan Masa Menggunakannya

Fahami cara @apply memasukkan kelas utiliti terus ke dalam peraturan CSS dan kenal pasti keadaan yang sesuai untuk mengekstrak kelas.

Pelajaran 1 daripada 413 langkah

Fungsi @apply dan Masa Menggunakannya ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Masalah yang Diselesaikan oleh @apply

Pendekatan berasaskan utiliti Tailwind meletakkan semua gaya secara terus pada elemen HTML. Untuk halaman ringkas, pendekatan ini tidak bermasalah. Namun, apabila gabungan 15 kelas utiliti yang sama muncul pada 50 elemen butang, pengemaskinian satu perincian reka bentuk memerlukan perubahan di 50 tempat. Arahan @apply menyelesaikan masalah ini dengan membolehkan anda mengekstrak gabungan utiliti yang kerap berulang ke dalam satu kelas CSS tersuai — tanpa meninggalkan sistem utiliti Tailwind.

Cara @apply Berfungsi

@apply ialah arahan PostCSS yang diproses oleh Tailwind semasa kompilasi. Apabila Tailwind menemui @apply bg-blue-600 text-white font-semibold dalam peraturan CSS, ia memasukkan pengisytiharan CSS yang akan dijana oleh utiliti tersebut. Peraturan CSS yang terhasil mengandungi nilai sifat sebenar, bukan nama kelas Tailwind. Output pelayar akhir tidak mengetahui kewujudan Tailwind atau @apply.

/* Your CSS with @apply */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold text-sm;
  }
  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700;
  }
}

/* Compiled output (what the browser sees) */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.btn-primary {
  /* btn styles + primary colors */
}

Menulis @apply dalam Fail CSS

Gunakan @apply di dalam fail CSS yang diproses oleh Tailwind. Sentiasa balut kelas komponen yang diekstrak dalam blok @layer components supaya Tailwind memasukkannya pada kedudukan yang betul dalam helaian gaya yang dijana — selepas gaya asas tetapi sebelum kelas utiliti. Ini memastikan kelas utiliti yang digunakan secara terus dalam HTML masih boleh mengatasi gaya kelas komponen anda.

/* styles/components.css or in your main CSS file */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           px-4 py-2 rounded-lg text-sm font-semibold
           transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white
           hover:bg-blue-700
           focus:ring-blue-500;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800
           hover:bg-gray-300
           focus:ring-gray-500;
  }
}

Bila Hendak Menggunakan @apply

Situasi yang sesuai untuk @apply adalah terhad dan khusus. Gunakannya apabila: gabungan utiliti yang sama muncul secara verbatim di 5 tempat atau lebih; komponen dipaparkan dalam konteks yang menyebabkan anda tidak dapat mengawal HTML (seperti kandungan yang dipaparkan daripada markdown atau komponen pihak ketiga); atau apabila keterbatasan rangka kerja menyebabkan logik bersyarat berasaskan kelas tidak praktikal. Jika anda boleh menggunakan komponen JSX, komponen Vue atau separa HTML, pilihan tersebut hampir sentiasa lebih baik.

Kes Penggunaan Lazim @apply

Kes penggunaan @apply secara praktikal termasuk: gaya asas butang yang dikongsi oleh banyak tika butang, gaya tetapan semula input borang yang digunakan secara seragam, gaya tipografi untuk kandungan blog yang dipaparkan daripada markdown, dan kelas utiliti yang dibenamkan dalam HTML komponen pihak ketiga yang tidak boleh anda ubah. Dalam semua kes ini, persamaan utamanya ialah anda tidak boleh meletakkan kelas utiliti secara terus pada elemen HTML yang memerlukannya.

@layer components {
  /* Used in markdown-rendered content where you can't add classes to elements */
  .content h1 { @apply text-3xl font-bold mb-4 text-gray-900; }
  .content h2 { @apply text-2xl font-semibold mb-3 text-gray-800; }
  .content p  { @apply text-gray-600 leading-relaxed mb-4; }
  .content a  { @apply text-blue-600 underline hover:text-blue-800; }
  .content ul { @apply list-disc list-inside mb-4 space-y-1; }

  /* Shared input base */
  .form-field {
    @apply w-full rounded-lg border border-gray-300 px-4 py-2
           focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm;
  }
}

Arahan @layer

Tailwind mempunyai tiga lapisan: base, components dan utilities. Gunakan @layer base untuk tetapan semula elemen dan lalai global. Gunakan @layer components untuk kelas komponen yang diekstrak dan dibina dengan @apply. Gunakan @layer utilities untuk kelas utiliti tersuai yang mempunyai satu tujuan. Susunan lapisan memastikan kelas utiliti sentiasa mengatasi kelas komponen, yang pula mengatasi gaya asas — sekali gus mengekalkan hierarki kekhususan yang dijangka.

@layer base {
  /* Global resets and element defaults */
  body { @apply font-sans text-gray-900 antialiased; }
  a { @apply text-blue-600 hover:underline; }
}

@layer components {
  /* Extracted multi-utility patterns */
  .card { @apply bg-white rounded-xl shadow p-6; }
}

@layer utilities {
  /* Custom single-purpose utilities */
  .text-balance { text-wrap: balance; }
}

Menggunakan Pengubah dengan @apply

Anda boleh menggunakan pengubah keadaan dan responsif di dalam @apply sama seperti dalam HTML. Tulis hover:bg-blue-700, focus:ring-2 atau md:flex secara terus dalam pernyataan @apply dan Tailwind akan menjana CSS berasaskan pemilih yang betul. Inilah salah satu sebab @apply lebih berkuasa daripada menulis CSS secara manual — anda mendapat seluruh sistem varian tanpa usaha tambahan.

@layer components {
  .badge {
    @apply
      inline-flex items-center px-2.5 py-0.5 rounded-full
      text-xs font-medium
      bg-gray-100 text-gray-700
      /* Hover state */
      hover:bg-gray-200
      /* Dark mode */
      dark:bg-gray-700 dark:text-gray-300
      dark:hover:bg-gray-600
      /* Transition */
      transition-colors duration-150;
  }
}

Merangkaikan Kelas @apply

Anda boleh merujuk kelas komponen lain yang dicipta dengan @apply di dalam @apply yang lain. Contohnya, takrifkan kelas asas .btn, kemudian rujuknya dalam .btn-primary untuk mewarisi semua gaya asas butang. Ini menghasilkan rantaian pewarisan yang ringkas. Berhati-hati dengan penyusunan bersarang yang terlalu mendalam — keadaan ini mewujudkan kebergantungan tersirat yang sukar dijejaki semasa penyahpepijatan.

@layer components {
  /* Base class */
  .btn {
    @apply inline-flex items-center px-4 py-2 rounded-lg
           text-sm font-medium transition-colors duration-150
           focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

  /* Variants inherit from .btn */
  .btn-primary   { @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500; }
  .btn-danger    { @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; }
  .btn-ghost     { @apply btn text-gray-700 hover:bg-gray-100 focus:ring-gray-400; }
}

@apply dalam Gaya SFC

Dalam Komponen Fail Tunggal Vue (SFC) dan sesetengah persediaan React dengan Modul CSS, anda boleh menggunakan @apply di dalam blok <style> komponen. Ini mengekalkan gaya komponen bersama templat sambil terus menggunakan utiliti Tailwind sebagai blok binaan. Konfigurasikan pembundel anda untuk memproses blok gaya ini melalui PostCSS dengan pemalam Tailwind bagi membolehkan @apply.

<!-- Vue SFC with @apply in <style> -->
<template>
  <button class="btn">Click Me</button>
</template>

<style scoped>
  .btn {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg
           font-medium hover:bg-blue-700
           transition-colors duration-150;
  }
</style>

Soalan yang Tepat: Adakah @apply Diperlukan?

Sebelum menggunakan @apply, sentiasa tanya: bolehkah saya mengekstrak ini menjadi komponen? Dalam React, ini bermaksud komponen Button yang menerima prop variant. Dalam HTML, ini bermaksud separa atau kemasukan templat. Pengekstrakan komponen biasanya lebih baik daripada @apply kerana ia jelas, mudah dicari dan berfungsi dengan semua rangka kerja. Gunakan @apply hanya apabila pengekstrakan komponen tidak boleh dilakukan atau tidak praktikal.

/* Instead of @apply in a CSS file... */
.btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded-lg; }

/* Prefer a JSX component */
function Button({ children, variant = 'primary' }) {
  const styles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };
  return (
    <button className={'px-4 py-2 rounded-lg font-medium ' + styles[variant]}>
      {children}
    </button>
  );
}

Mengesahkan Output @apply

Selepas menulis peraturan @apply, sahkan bahawa peraturan tersebut dikompil dengan betul dengan membina CSS anda dan memeriksa output. Cari nama kelas yang anda cipta dalam fail CSS yang dikompil. Anda sepatutnya melihat pengisytiharan CSS penuh yang dimasukkan — bukan sintaks @apply, kerana sintaks tersebut dibuang semasa kompilasi. Jika kelas tiada atau memaparkan sifat yang tidak dijangka, semak peletakan @layer dan pastikan semua utiliti yang dirujuk ialah kelas Tailwind yang sah.

# Build and search for your custom class
npx tailwindcss -i ./src/input.css -o ./dist/output.css
grep '.btn-primary' ./dist/output.css

# Or watch mode for real-time feedback
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Semakan Pantas

Uji pemahaman anda tentang arahan @apply dalam Tailwind CSS.

Jawab dalam pelajaran interaktif

Rumusan Pelajaran

Dalam pelajaran ini, anda telah mempelajari perkara berikut: @apply memasukkan CSS kelas utiliti ke dalam nama kelas tersuai dan sesuai untuk kandungan yang tidak boleh anda tambahkan kelas secara terus, sentiasa letakkan kelas berasaskan @apply di dalam @layer components untuk mengekalkan kekhususan yang betul, dan pengekstrakan komponen (JSX, Vue SFC, separa HTML) biasanya lebih baik daripada @apply apabila boleh dilakukan. Seterusnya, kita akan membina kelas komponen boleh guna semula dengan @apply.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Fungsi @apply dan Masa Menggunakannya” percuma?

Ya — teks penuh “Fungsi @apply dan Masa Menggunakannya” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Fungsi @apply dan Masa Menggunakannya”?

Fahami cara @apply memasukkan kelas utiliti terus ke dalam peraturan CSS dan kenal pasti keadaan yang sesuai untuk mengekstrak kelas. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Fungsi @apply dan Masa Menggunakannya” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?

Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Fungsi @apply dan Masa Menggunakannya
Mencipta Kelas Komponen Boleh Guna Semula
Menyusun CSS Tersuai dengan Lapisan
Perangkap dan Alternatif @apply

← Kembali ke Tailwind CSS Academy