Tailwind CSS Academy · Pelajaran

Tailwind berbanding CSS Tradisional

Bandingkan penggayaan berteraskan utiliti dengan penulisan CSS biasa dan BEM, serta pelajari masa setiap pendekatan paling sesuai digunakan.

Pelajaran 4 daripada 413 langkah

Tailwind berbanding CSS Tradisional ialah pelajaran Tailwind CSS 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 Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.

Cara Lama: CSS Semantik

Cara lama ialah CSS semantik: nama kelas deskriptif seperti .navbar atau .card dalam fail berasingan, yang bertujuan menerangkan fungsi. Kaedah seperti BEM berkembang daripada pendekatan ini.

/* Traditional CSS */
.hero-title {
  font-size: 3rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

<h1 class="hero-title">Build Something Great</h1>

Apakah Itu BEM?

BEM bermaksud Block, Element, Modifier: Block seperti .card, Element seperti .card__title dan Modifier seperti .card--featured. Jelas, tetapi memerlukan disiplin.

<!-- BEM naming convention -->
<div class="card card--featured">
  <img class="card__image" src="thumb.jpg" alt="" />
  <h2 class="card__title">Featured Post</h2>
  <p class="card__description">A short summary...</p>
  <a class="card__link card__link--primary" href="#">Read More</a>
</div>

Kad yang Sama dalam Tailwind

Inilah kad yang sama dalam Tailwind. Tiada fail CSS langsung — setiap pilihan ditunjukkan dalam HTML: rounded-xl shadow-md untuk bentuk, text-xl font-bold untuk tajuk.

<!-- Tailwind equivalent -->
<div class="rounded-xl shadow-md overflow-hidden bg-white border border-indigo-200">
  <img class="w-full h-48 object-cover" src="thumb.jpg" alt="" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-2">Featured Post</h2>
    <p class="text-gray-500 text-sm mb-4">A short summary...</p>
    <a class="text-indigo-600 font-semibold hover:underline" href="#">Read More</a>
  </div>
</div>

Masalah Kekhususan dalam CSS Tradisional

CSS tradisional mempunyai masalah kekhususan: peraturan bersaing untuk menentukan yang mana menang, lalu !important digunakan di merata tempat dan kod menjadi rapuh. Utiliti Tailwind kekal mudah dijangka.

/* Specificity conflict example */
.sidebar .card .card__title { color: red; }    /* specificity: 0,3,0 */
.featured-section .card__title { color: blue; } /* specificity: 0,2,0 */

/* Which color wins? Depends on file order AND specificity */
/* This becomes unmanageable at scale */

Pertumbuhan Fail CSS Mengikut Masa

Fail CSS biasa terus berkembang kerana tiada siapa berani memadam peraturan lama. Tailwind membuang utiliti yang tidak digunakan pada masa binaan, jadi CSS anda tidak pernah dipenuhi lebihan yang tidak berguna.

Beralih antara Fail

Dengan CSS klasik, anda perlu berulang-alik antara HTML dan CSS untuk setiap perubahan kecil. Tailwind mengekalkan anda dalam HTML, lalu mempercepat aliran kerja dengan ketara.

<!-- With Tailwind: no CSS file to open -->
<button class="py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600">
  Submit
</button>

<!-- With traditional CSS: go find/create .submit-button in your CSS file -->
<button class="submit-button">Submit</button>

Apabila CSS Tradisional Masih Lebih Baik

Ada kalanya CSS tradisional masih lebih baik: untuk menggayakan HTML pihak ketiga yang tidak boleh anda sunting, animasi kerangka utama yang kompleks atau helaian gaya awam untuk pembangun lain.

/* Complex animation: better in CSS than utility classes */
@keyframes wave {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.wave-animation {
  animation: wave 1s ease-in-out infinite;
}

Konsistensi: Skala berbanding Nilai Bebas

Tailwind secara senyap memastikan konsistensi. Daripada menaip pelapik 13px atau 17px secara manual, anda memilih daripada skala 4px supaya reka bentuk kekal harmoni secara lalai.

<!-- Tailwind spacing: always consistent multiples -->
<div class="p-4">  <!-- 16px -->
<div class="p-6">  <!-- 24px -->
<div class="p-8">  <!-- 32px -->

<!-- vs Traditional CSS: any value is valid -->
div { padding: 13px; } /* Why 13? Nobody knows. */

Perbandingan Prestasi

Adakah semua kelas itu menjejaskan prestasi? Tidak — kelas yang berulang dimampatkan dengan sangat baik, dan CSS Tailwind biasanya jauh lebih kecil daripada helaian gaya yang tidak dioptimumkan.

Pengenalan Pasukan: Tailwind berbanding CSS

Pengenalan juga menjadi lebih mudah. Sesiapa yang mengetahui dokumentasi Tailwind boleh membaca dan mengedit mana-mana komponen, kerana nama kelas membawa maksud yang sama dalam setiap projek.

Memilih Pendekatan yang Tepat

Jadi, yang mana perlu dipilih? Tailwind untuk antara muka aplikasi dan sistem reka bentuk yang anda kawal; CSS tradisional untuk tema atau HTML CMS. Banyak projek menggunakan kedua-duanya dengan baik.

Semakan Pantas

Semakan pantas! Bandingkan Tailwind dan CSS dalam fikiran anda. ⚖️

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Syabas! CSS tradisional menamakan perkara dalam fail, manakala Tailwind menggabungkannya dalam HTML. BEM tidak menyelesaikan pertumbuhan fail, dan skala memastikan konsistensi. Seterusnya: tipografi.

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 “Tailwind berbanding CSS Tradisional” percuma?

Ya — teks penuh “Tailwind berbanding CSS Tradisional” 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 “Tailwind berbanding CSS Tradisional”?

Bandingkan penggayaan berteraskan utiliti dengan penulisan CSS biasa dan BEM, serta pelajari masa setiap pendekatan paling sesuai digunakan. 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 4 daripada 4.

Berapa lamakah pelajaran “Tailwind berbanding CSS Tradisional” 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

← Kembali ke Tailwind CSS Academy