Konvensi Tim dan Panduan Gaya

Tanpa konvensi yang disepakati, proyek Tailwind akan menjadi tidak konsisten. Seorang pengembang menulis p-4 di mana-mana, sementara yang lain menggunakan px-4 py-4. Seseorang menggunakan @apply secara bebas, sementara yang lain sepenuhnya menghindarinya. Panduan gaya tim mendokumentasikan keputusan yang telah dibuat tim Anda agar semua orang menulis Tailwind dengan cara yang sama, sehingga peninjauan kode menjadi lebih cepat dan basis kode lebih mudah dipelihara.

Meskipun plugin Prettier menegakkan pengurutan secara otomatis, panduan gaya Anda harus mendokumentasikan alasan penggunaan urutan kanonis dan seperti apa urutan tersebut agar pengembang memahaminya, bukan sekadar mengikutinya secara membabi buta. Sertakan urutan kelompok — tata letak, ukuran, jarak, tipografi, visual, interaktif — agar anggota tim dapat memperkirakan posisi suatu class.

Salah satu sumber perbedaan pendapat yang umum adalah kapan harus mengekstrak utilitas dengan @apply. Tetapkan aturan yang jelas: misalnya, gunakan @apply hanya ketika suatu pola berulang lebih dari tiga kali di berbagai komponen DAN tidak dapat diselesaikan dengan komponen JSX atau templat bersama. Hal ini mencegah abstraksi yang terlalu dini sekaligus menangani duplikasi yang benar-benar ada.

Notasi kurung siku Tailwind seperti w-[347px] memang sangat kuat, tetapi dapat menyebabkan bertambahnya angka ajaib yang sulit dipelihara. Panduan gaya Anda harus mewajibkan agar nilai arbitrer diberi alasan dalam komentar, dan agar nilai yang muncul lebih dari sekali ditambahkan ke blok extend tema sebagai token bernama.

Setiap entri dalam safelist menambah biaya pada setiap build. Panduan gaya Anda harus mewajibkan agar classes yang masuk safelist menyertakan komentar yang menjelaskan alasan classes tersebut tidak dapat dideteksi secara statis. Buat jadwal audit safelist — misalnya setiap tiga bulan — untuk menghapus entri bagi fitur yang telah dihapus atau direstrukturisasi.

Jika proyek Anda menggunakan @apply untuk membuat class komponen, tetapkan konvensi penamaan. Nama yang terinspirasi BEM seperti .btn-primary dan .card-body merupakan pilihan umum. Dokumentasikan pola penamaan yang digunakan tim Anda dan pastikan class komponen kustom tidak pernah bertentangan dengan nama utilitas milik Tailwind.

Dokumentasikan cara tim Anda menangani desain responsif. Konvensi yang umum meliputi selalu mengutamakan seluler (gaya dasar untuk seluler, awalan menambahkan perilaku untuk layar yang lebih besar), hanya menggunakan sebagian titik henti (misalnya, hanya md dan lg), serta tidak pernah menerapkan awalan tanpa mendefinisikan kasus dasarnya agar gaya dapat mengalir dengan benar.

Pilih dan dokumentasikan satu strategi mode gelap untuk seluruh proyek — yaitu strategi class atau strategi media — dan jangan mencampurnya. Tentukan elemen mana yang selalu memerlukan varian gelap (latar belakang, teks, border) dan mana yang dapat mewarisinya. Sertakan daftar periksa untuk meninjau kelengkapan mode gelap pada komponen baru sebelum penggabungan.

Masukkan konvensi Tailwind ke dalam proses peninjauan PR Anda. Daftar periksa singkat dalam templat PR mengingatkan penulis dan peninjau untuk memverifikasi konvensi penting. Itemnya dapat mencakup: classes sudah diurutkan, tidak ada pembuatan class dinamis yang tidak masuk safelist, nilai arbitrer memiliki komentar, varian mode gelap lengkap, dan tidak ada utilitas yang saling bertentangan.

Tulis panduan gaya dalam file STYLE_GUIDE.md yang di-commit ke repositori. Simpan panduan tersebut dekat dengan kode, bukan di wiki terpisah yang dapat menjadi usang. Setiap konvensi harus menyertakan alasan singkat agar anggota tim baru memahami mengapa konvensi tersebut ada, sehingga mereka lebih mudah menerima dan mengikutinya. Tinjau panduan setiap tiga bulan dan perbarui seiring perkembangan proyek.

Panduan gaya hanya efektif jika dibaca oleh pengembang baru. Sertakan tautan ke panduan gaya Tailwind dalam README proyek dan daftar periksa orientasi anggota tim baru. Pertimbangkan untuk menambahkan kuis atau latihan singkat yang memungkinkan pengembang baru menerapkan konvensi pada komponen latihan sebelum menyentuh kode produksi.

Dalam pelajaran ini, Anda telah mempelajari: mendefinisikan konvensi nilai arbitrer dan @apply untuk mencegah penyalahgunaan, menyertakan konvensi dalam daftar periksa PR agar peninjauan konsisten, dan mendokumentasikan panduan gaya di repositori agar tetap diperbarui. Selanjutnya, kita akan membuat bagian hero dan navigasi halaman arahan yang lengkap.