Tailwind CSS Academy · Pelajaran

Konvensyen Pasukan dan Panduan Gaya

Takrifkan panduan gaya pasukan untuk susunan kelas, penamaan komponen, masa menggunakan @apply, dan cara mengendalikan nilai arbitrari sekali guna secara konsisten.

Pelajaran 4 daripada 413 langkah

Konvensyen Pasukan dan Panduan Gaya 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.

Mengapa Pasukan Memerlukan Panduan Gaya Tailwind

Tanpa konvensyen yang dipersetujui, projek Tailwind akan menjadi tidak konsisten. Seorang pembangun menulis p-4 di serata tempat, manakala seorang lagi menggunakan px-4 py-4. Seorang menggunakan @apply secara meluas, manakala seorang lagi mengelakkannya sepenuhnya. Panduan gaya pasukan mendokumenkan keputusan yang dibuat oleh pasukan anda supaya semua orang menulis Tailwind dengan cara yang sama, menjadikan semakan kod lebih pantas dan pangkalan kod lebih mudah diselenggara.

Mentakrifkan Konvensyen Susunan Class

Walaupun plugin Prettier menguatkuasakan susunan secara automatik, panduan gaya anda hendaklah mendokumenkan sebab susunan kanonik digunakan dan rupanya supaya pembangun memahaminya, bukan sekadar mengikutinya secara membuta tuli. Sertakan susunan kumpulan — reka letak, saiz, jarak, tipografi, visual dan interaktif — supaya ahli pasukan dapat menjangka tempat sesuatu class patut diletakkan.

<!-- Canonical order groups -->
<div class="
  flex items-center gap-4    /* Layout */
  w-full max-w-md            /* Sizing */
  p-6 mx-auto                /* Spacing */
  text-sm font-medium        /* Typography */
  bg-white rounded-lg shadow /* Visual */
  hover:shadow-md transition  /* Interactive */
">

Bila Hendak Menggunakan @apply

Satu punca perselisihan yang biasa ialah bila utiliti hendak diekstrak dengan @apply. Tetapkan peraturan yang jelas: contohnya, gunakan @apply hanya apabila sesuatu corak berulang lebih daripada tiga kali merentasi komponen yang berbeza DAN tidak dapat diselesaikan dengan komponen JSX atau templat yang dikongsi. Ini menghalang pengabstrakan pramatang sambil mengenal pasti pertindihan yang sebenar.

/* ALLOWED: repeated button pattern with no JSX component possible */
.btn-primary {
  @apply rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700;
}

/* DISCOURAGED: abstracting a one-off layout that appears only once */
.hero-section {
  @apply flex min-h-screen flex-col items-center justify-center bg-gray-50;
}

Konvensyen Nilai Arbitrari

Notasi kurungan Tailwind seperti w-[347px] amat berkuasa tetapi boleh menyebabkan lambakan nombor magik yang sukar diselenggara. Panduan gaya anda hendaklah mewajibkan nilai arbitrari disokong dengan alasan dalam komen, dan nilai yang muncul lebih daripada sekali hendaklah ditambahkan pada blok extend tema sebagai token bernama.

<!-- DISCOURAGED: unexplained magic number -->
<div class="h-[347px]">

<!-- BETTER: explain the constraint with a comment -->
<!-- Height matches the sidebar for visual alignment -->
<div class="h-[347px]">

<!-- BEST: promote to a named token in the config -->
<!-- tailwind.config.js: extend.height: { sidebar: '347px' } -->
<div class="h-sidebar">

Tadbir Urus Safelist

Setiap entri dalam safelist menambahkan kos pada setiap binaan. Panduan gaya anda hendaklah mewajibkan classes dalam safelist disertakan komen yang menerangkan sebab classes tersebut tidak dapat dikesan secara statik. Wujudkan jadual audit safelist — contohnya, setiap suku tahun — untuk membuang entri bagi ciri yang telah dibuang atau difaktorkan semula.

// tailwind.config.js
module.exports = {
  safelist: [
    // REASON: color comes from CMS content, cannot be statically detected
    // REVIEW DATE: 2026-Q3
    { pattern: /bg-(red|green|blue|yellow)-(100|500)/ },

    // REASON: toast severity classes set by JS at runtime
    'border-red-500',
    'border-green-500',
  ],
};

Konvensyen Penamaan Komponen

Jika projek anda menggunakan @apply untuk mencipta classes komponen, tetapkan konvensyen penamaan. Nama berasaskan BEM seperti .btn-primary dan .card-body ialah pilihan yang biasa. Dokumentasikan corak penamaan yang digunakan oleh pasukan anda dan pastikan classes komponen tersuai tidak pernah bercanggah dengan nama utiliti Tailwind sendiri.

/* Naming convention: {component}-{variant} */
.btn { @apply rounded-lg px-4 py-2 font-semibold; }
.btn-primary { @apply btn bg-blue-600 text-white hover:bg-blue-700; }
.btn-outline { @apply btn border border-blue-600 text-blue-600 hover:bg-blue-50; }

.card { @apply rounded-xl bg-white shadow; }
.card-header { @apply border-b border-gray-100 p-4 font-semibold; }
.card-body { @apply p-4; }

Konvensyen Awalan Responsif

Dokumentasikan cara pasukan anda mengendalikan reka bentuk responsif. Konvensyen yang biasa termasuk sentiasa mengutamakan mudah alih (gaya asas adalah untuk mudah alih, manakala awalan menambah tingkah laku untuk skrin yang lebih besar), menggunakan hanya sebahagian titik henti (contohnya, md dan lg sahaja), serta tidak pernah menggunakan awalan tanpa turut mentakrifkan kes asas supaya gaya diwarisi dengan betul.

<!-- GOOD: mobile-first base, then larger breakpoints -->
<div class="flex-col gap-4 md:flex-row md:gap-6 lg:gap-8">

<!-- CONFUSING: responsive prefix without a base style -->
<div class="md:flex-row">
<!-- What displays on mobile? The browser's UA default — unpredictable -->

Konvensyen Mod Gelap

Pilih dan dokumentasikan satu strategy mod gelap untuk keseluruhan projek — sama ada class strategy atau media strategy — dan jangan campurkan kedua-duanya. Nyatakan elemen yang sentiasa memerlukan varian gelap (latar belakang, teks dan sempadan) serta elemen yang boleh mewarisinya. Sertakan senarai semak untuk menyemak kelengkapan mod gelap bagi komponen baharu sebelum penggabungan.

/* Documented decision: we use class strategy */
/* tailwind.config.js: darkMode: 'class' */

/* Component dark mode checklist:
   [ ] bg-* has a dark:bg-* variant
   [ ] text-* has a dark:text-* variant
   [ ] border-* has a dark:border-* variant
   [ ] ring-* has a dark:ring-* variant if used as focus indicator
*/

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">

Senarai Semak Semakan Pull Request

Masukkan konvensyen Tailwind ke dalam proses semakan PR anda. Senarai semak ringkas dalam templat PR mengingatkan pengarang dan penyemak supaya mengesahkan konvensyen utama. Item yang mungkin disertakan: classes telah diisih, tiada pembinaan class dinamik yang tidak dilindungi, nilai arbitrari mempunyai komen, varian mod gelap lengkap dan tiada utiliti yang bercanggah.

## Tailwind Checklist
- [ ] Classes sorted (Prettier ran)
- [ ] No typos (ESLint passed)
- [ ] Arbitrary values explained with comments
- [ ] Dark mode variants added for new surfaces
- [ ] No dynamic class concatenation without safelist
- [ ] Responsive base styles defined before breakpoint prefixes

Mendokumentasikan Panduan Gaya

Tulis panduan gaya dalam fail STYLE_GUIDE.md yang di-commit ke repositori. Simpan panduan itu berdekatan dengan kod, bukan dalam wiki berasingan yang mungkin ketinggalan. Setiap konvensyen hendaklah menyertakan alasan ringkas supaya ahli pasukan baharu memahami sebabnya, sekali gus memudahkan penerimaan dan pematuhan. Semak panduan tersebut setiap suku tahun dan kemas kini mengikut perkembangan projek.

# Tailwind CSS Style Guide

## 1. Class Ordering
Use Prettier plugin — no manual sorting required.

## 2. @apply Usage
Only for patterns repeated 3+ times with no component solution.

## 3. Arbitrary Values
Add a comment. If used 2+ times, promote to theme.extend.

## 4. Dark Mode
Class strategy. Every new background and text color needs dark variant.

Memperkenalkan Pembangun Baharu

Panduan gaya hanya berkesan jika pembangun baharu membacanya. Sertakan pautan kepada panduan gaya Tailwind dalam README projek anda dan dalam senarai semak pengenalan untuk ahli pasukan baharu. Pertimbangkan untuk menambahkan kuiz atau latihan ringkas yang membolehkan pembangun baharu menggunakan konvensyen pada komponen latihan sebelum menyentuh kod pengeluaran.

# README.md

## Getting Started
1. `npm install`
2. Read [STYLE_GUIDE.md](./STYLE_GUIDE.md) before writing any Tailwind classes
3. Enable the recommended VS Code extensions from `.vscode/extensions.json`
4. Run `npm run lint && npm run format:check` before every commit

Semakan Pantas

Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda telah mempelajari: mentakrifkan konvensyen @apply dan nilai arbitrari untuk mengelakkan penyalahgunaan, menerapkan konvensyen ke dalam senarai semak PR bagi memastikan semakan yang konsisten, dan mendokumentasikan panduan gaya dalam repositori supaya sentiasa dikemas kini. Seterusnya, kita akan membina bahagian utama halaman pendaratan yang lengkap berserta navigasi.

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 “Konvensyen Pasukan dan Panduan Gaya” percuma?

Ya — teks penuh “Konvensyen Pasukan dan Panduan Gaya” 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 “Konvensyen Pasukan dan Panduan Gaya”?

Takrifkan panduan gaya pasukan untuk susunan kelas, penamaan komponen, masa menggunakan @apply, dan cara mengendalikan nilai arbitrari sekali guna secara konsisten. 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 “Konvensyen Pasukan dan Panduan Gaya” 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