𝗥𝗲𝗮𝗹𝗶𝘁𝗶 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗦𝗲𝗻𝗶 𝗕𝗶𝗻𝗮 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿
Organisasi besar tidak membenarkan semua orang menggayakan setiap halaman. Mereka menggunakan struktur khusus untuk memastikan kod mereka kekal bersih.
Sistem reka bentuk yang matang seperti Shopify Polaris menggunakan dua peranan berbeza:
Penulis Komponen (The Gatekeepers): Pasukan ini membina UI teras. Mereka menulis kelas Tailwind. Mereka menguruskan kebolehcapaian (accessibility), mod gelap, dan token reka bentuk (design tokens).
Pembangun Ciri (The Assemblers): Pasukan ini membina produk dan papan pemuka (dashboards). Mereka fokus pada logik perniagaan dan susun atur (layout). Mereka tidak memilih warna atau jarak (spacing).
Organisasi menguatkuasakan sempadan ini dengan peraturan lint dan semakan kod (code reviews).
Apa yang patut anda lakukan: • Gunakan utiliti susun atur seperti flex, grid, dan gap.
Apa yang patut anda elakkan: • Menambah gaya visual baharu seperti bg-indigo-600 atau text-lg secara terus di dalam halaman ciri. Gunakan komponen sedia ada sebagai ganti.
Berikut adalah cara ia berfungsi dalam kod.
Pasukan Sistem Reka Bentuk mencipta butang yang boleh digunakan semula dalam @/components/ui/button.tsx. Mereka memusatkan gaya visual:
import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes
export function Button({ variant = 'primary', className = '', children, ...props }: ButtonProps) { const baseStyles = "px-4 py-2 rounded-lg font-medium text-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2";
const variants = { primary: "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500", secondary: "bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-500" };
return (
<button className={${baseStyles} ${variants[variant]} ${className}} {...props}>
{children}
);
}
Pembangun Ciri kemudian membina halaman dengan menyusun blok-blok ini:
import { Button } from "@/components/ui/button";
export default function Dashboard() { return (
Struktur ini menawarkan tiga manfaat utama:
- Penyelenggaraan yang lebih mudah. Jika anda membuang butang, anda tidak akan meninggalkan CSS yang tidak digunakan (dead CSS).
- Kemas kini yang pantas. Jika jenama anda berubah daripada indigo kepada violet, anda hanya perlu menukar satu fail. Perubahan tersebut akan mengalir ke seluruh aplikasi.
- Ketekalan (Consistency). Setiap pembangun menggunakan token reka bentuk yang sama.
Matlamatnya bukan sekadar tentang Tailwind. Ia adalah tentang mewujudkan sempadan antara mereka yang membina sistem tersebut dan mereka yang menggunakannya.
Dalam Bahagian 2, saya akan membincangkan cara mengendalikan pengecualian reka bentuk tanpa merosakkan seni bina anda.