𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗠𝘂𝗻𝗱𝗼 𝘄𝗮 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿
Mashirika makubwa hayaruhusu kila mtu atengeneze mitindo (style) kwenye kila ukurasa. Wanatumia muundo maalum ili kuweka kodi yao ikiwa safi.
Mifumo ya usanifu (design systems) iliyoiva kama Shopify Polaris hutumia majukumu mawili tofauti:
Waandishi wa Vipengele (The Gatekeepers): Timu hii hutengeneza UI ya msingi. Wanaandika madarasa (classes) ya Tailwind. Wanadhibiti ufikiaji (accessibility), hali ya giza (dark mode), na design tokens.
Watengenezaji wa Feature (The Assemblers): Timu hii hutengeneza bidhaa na dashibodi. Wanajikita kwenye mantiki ya biashara (business logic) na mpangilio (layout). Hawachagui rangi au nafasi (spacing).
Mashirika hudhibiti mpaka huu kwa kutumia sheria za lint na mapitio ya kodi (code reviews).
Unachopaswa kufanya: • Tumia zana za mpangilio (layout utilities) kama flex, grid, na gap.
Unachopaswa kuepuka: • Kuongeza mitindo mipya ya kuonekana kama bg-indigo-600 au text-lg moja kwa moja ndani ya kurasa za feature. Badala yake, tumia kipengele (component) kilichopo.
Hivi ndivyo inavyofanya kazi kwenye kodi.
Timu ya Mfumo wa Usanifu (Design System Team) hutengeneza kitufe kinachoweza kutumika tena katika @/components/ui/button.tsx. Wanatengeneza mitindo ya kuonekana katika sehemu moja:
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}
);
}
Mtengenezaji wa Feature kisha hutengeneza ukurasa kwa kuunganisha vizuizi hivi:
import { Button } from "@/components/ui/button";
export default function Dashboard() { return (
Muundo huu unatoa faida kuu tatu:
- Utunzaji rahisi zaidi. Ukiondoa kitufe, hauachi CSS isiyotumika (dead CSS) nyuma.
- Maboresho ya haraka. Ikiwa chapa yako inabadilika kutoka indigo kwenda violet, unabadilisha faili moja tu. Mabadiliko hayo yanasambaa kwenye programu nzima.
- Uwiano (Consistency). Kila mtengenezaji hutumia design tokens zilezile.
Lengo si kuhusu Tailwind pekee. Ni kuhusu kuweka mpaka kati ya wale wanaojenga mfumo na wale wanaoutumia.
Katika Sehemu ya 2, nitajadili jinsi ya kushughulikia mambo yanayotofautiana na muundo bila kuharibu usanifu wako.