Frontend Academy · Pelajaran

Pendekatan Utility-First Tailwind CSS

Gunakan kelas utiliti sedia bina terus dalam HTML, sesuaikan tema dalam tailwind.config.js, dan gunakan @apply untuk mengekstrak corak berulang.

Pelajaran 4 daripada 413 langkah

Pendekatan Utility-First Tailwind CSS ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 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 Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah CSS Berteraskan Utiliti?

Tailwind CSS menyediakan kelas utiliti siap bina untuk setiap sifat CSS. Daripada menulis CSS tersuai, anda menggubah gaya dengan menambah kelas utiliti terus dalam HTML. Satu kelas = satu pengisytiharan CSS.

Memasang Tailwind

Pasang Tailwind dan mulakan konfigurasi. Projek Vite menggunakan pemalam Vite Tailwind atau pemalam PostCSS.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

Kelas Utiliti dalam Amalan

Bina kad hanya menggunakan kelas utiliti Tailwind. Tiada fail CSS tersuai diperlukan.

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

Awalan Responsif

Tambahkan awalan titik henti responsif. md: diterapkan pada skrin sederhana dan ke atas. lg: pada skrin besar. Tailwind berteraskan mudah alih.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Varian Keadaan

Awali kelas dengan varian keadaan: hover:, focus:, active:, disabled:, dark:.

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

Mengkonfigurasi Tema

Sesuaikan warna, jarak, fon dan titik henti dalam tailwind.config.js. Luaskan tema lalai atau gantikan sebahagian daripadanya.

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply — Mengekstrak Corak

Gunakan @apply dalam fail CSS untuk menggabungkan kelas utiliti menjadi peraturan CSS yang boleh diguna semula. Gunakan secara berpada-pada — kelas utiliti terus lebih diutamakan dalam kebanyakan keadaan.

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

Membuang CSS yang Tidak Digunakan

Tailwind menjana ribuan kelas utiliti. Dalam pengeluaran, ia mengimbas fail sumber anda dan membuang setiap kelas yang tidak digunakan, lalu menghasilkan fail CSS yang sangat kecil (selalunya kurang daripada 10KB).

Tailwind dengan React/Vue

Dalam React, gunakan cn() (clsx + twMerge) untuk menerapkan kelas Tailwind secara bersyarat tanpa konflik. Dalam Vue, gunakan pengikatan :class.

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

IntelliSense Tailwind

Pasang sambungan VSCode Tailwind CSS IntelliSense untuk pelengkapan automatik, pratonton nama kelas apabila diarahkan dan pemeriksaan sintaks untuk kelas yang tidak diketahui. Ini meningkatkan pengalaman pembangunan Tailwind dengan ketara.

Kritikan dan Pembelaan Tailwind

Pengkritik: HTML menjadi sarat dengan banyak kelas dan lebih sukar dibaca. Pembelaan: Anda tidak perlu menulis CSS, semua gaya diletakkan bersama, dan sistem reka bentuk dikuatkuasakan melalui konfigurasi. Kebanyakan pasukan yang mencuba Tailwind secara konsisten melaporkan produktiviti yang lebih tinggi.

Semakan Pantas

Bagaimanakah Tailwind mengendalikan saiz himpunan pengeluaran sedangkan ia menjana ribuan kelas utiliti?

Jawab dalam pelajaran interaktif

Ringkasan: Tailwind CSS

Berteraskan utiliti: satu kelas = satu sifat CSS. CSS tersuai tidak diperlukan dalam kebanyakan keadaan. Awalan responsif dan keadaan (md:, hover:). Sesuaikan dengan tailwind.config.js. @apply untuk corak berulang. Binaan pengeluaran mengimbas dan membuang kelas yang tidak digunakan. Gunakan cn() + twMerge untuk kelas bersyarat dalam React. Pasang sambungan IntelliSense.

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: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pendekatan Utility-First Tailwind CSS” percuma?

Ya — teks penuh “Pendekatan Utility-First Tailwind CSS” 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 Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pendekatan Utility-First Tailwind CSS”?

Gunakan kelas utiliti sedia bina terus dalam HTML, sesuaikan tema dalam tailwind.config.js, dan gunakan @apply untuk mengekstrak corak berulang. Anda berlatih Frontend 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 Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend 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 4 daripada 4.

Berapa lamakah pelajaran “Pendekatan Utility-First Tailwind CSS” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

Metodologi BEM: Blok Elemen Pengubah
Modul CSS: Nama Kelas Berskop
CSS-in-JS: Styled-components dan Emotion
Pendekatan Utility-First Tailwind CSS

← Kembali ke Frontend Academy