ਰੀਅਲ ਵਰਲਡ Tailwind CSS: ਗੇਟਕੀਪਰ ਆਰਕੀਟੈਕਚਰ
ਵੱਡੀਆਂ ਸੰਸਥਾਵਾਂ ਹਰ ਕਿਸੇ ਨੂੰ ਹਰ ਪੇਜ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਨਹੀਂ ਦਿੰਦੀਆਂ। ਉਹ ਆਪਣੇ ਕੋਡ ਨੂੰ ਸਾਫ਼ ਰੱਖਣ ਲਈ ਇੱਕ ਖਾਸ ਢਾਂਚੇ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
Shopify Polaris ਵਰਗੇ ਪਰਿਪੱਕ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਦੋ ਵੱਖ-ਵੱਖ ਭੂਮਿਕਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ:
Component Authors (The Gatekeepers): ਇਹ ਟੀਮ ਮੁੱਖ UI ਬਣਾਉਂਦੀ ਹੈ। ਉਹ Tailwind ਕਲਾਸਾਂ ਲਿਖਦੇ ਹਨ। ਉਹ accessibility, dark mode, ਅਤੇ design tokens ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦੇ ਹਨ।
Feature Developers (The Assemblers): ਇਹ ਟੀਮ ਉਤਪਾਦ ਅਤੇ ਡੈਸ਼ਬੋਰਡ ਬਣਾਉਂਦੀ ਹੈ। ਉਹ business logic ਅਤੇ layout 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹਨ। ਉਹ ਰੰਗ ਜਾਂ ਸਪੇਸਿੰਗ (spacing) ਨਹੀਂ ਚੁਣਦੇ।
ਸੰਸਥਾਵਾਂ lint rules ਅਤੇ code reviews ਰਾਹੀਂ ਇਸ ਸੀਮਾ ਨੂੰ ਲਾਗੂ ਕਰਦੀਆਂ ਹਨ।
ਤੁਹਾਨੂੰ ਕੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: • flex, grid, ਅਤੇ gap ਵਰਗੇ layout utilities ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਤੁਹਾਨੂੰ ਕਿਸ ਚੀਜ਼ ਤੋਂ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ: • feature pages ਦੇ ਅੰਦਰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ bg-indigo-600 ਜਾਂ text-lg ਵਰਗੇ ਨਵੇਂ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਨਾ ਜੋੜੋ। ਇਸ ਦੀ ਬਜਾਏ ਕਿਸੇ ਮੌਜੂਦਾ component ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੋਡ ਵਿੱਚ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ।
Design System Team @/components/ui/button.tsx ਵਿੱਚ ਇੱਕ reusable button ਬਣਾਉਂਦੀ ਹੈ। ਉਹ ਵਿਜ਼ੂਅਲ ਸਟਾਈਲ ਨੂੰ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹਨ:
import React from 'react';
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary';
className?: string;
}
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}
</button>
);
}
ਫਿਰ Feature Developer ਇਹਨਾਂ ਬਲਾਕਾਂ ਨੂੰ ਜੋੜ ਕੇ ਪੇਜ ਬਣਾਉਂਦਾ ਹੈ:
import { Button } from "@/components/ui/button";
export default function Dashboard() {
return (
<div>
<Button variant="primary" className="mt-4">
Save Changes
</Button>
</div>
);
}
ਇਹ ਢਾਂਚਾ ਤਿੰਨ ਮੁੱਖ ਲਾਭ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
- ਆਸਾਨ ਰੱਖ-ਰਖਾਅ (maintenance)। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਹਟਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਪਿੱਛੇ ਫਾਲਤੂ (dead) CSS ਨਹੀਂ ਛੱਡਦੇ।
- ਤੇਜ਼ ਅੱਪਡੇਟ। ਜੇਕਰ ਤੁਹਾਡਾ ਬ੍ਰਾਂਡ indigo ਤੋਂ violet ਵਿੱਚ ਬਦਲਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਸਿਰਫ਼ ਇੱਕ ਫਾਈਲ ਬਦਲਦੇ ਹੋ। ਇਹ ਬਦਲਾਅ ਪੂਰੀ ਐਪ ਵਿੱਚ ਲਾਗੂ ਹੋ ਜਾਂਦਾ ਹੈ।
- ਇਕਸਾਰਤਾ (Consistency)। ਹਰ ਡਿਵੈਲਪਰ ਇੱਕੋ ਜਿਹੇ design tokens ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਮਕਸਦ ਸਿਰਫ਼ Tailwind ਬਾਰੇ ਨਹੀਂ ਹੈ। ਇਹ ਉਹਨਾਂ ਲੋਕਾਂ ਵਿਚਕਾਰ ਇੱਕ ਸੀਮਾ ਬਣਾਉਣ ਬਾਰੇ ਹੈ ਜੋ ਸਿਸਟਮ ਬਣਾਉਂਦੇ ਹਨ ਅਤੇ ਉਹਨਾਂ ਵਿਚਕਾਰ ਜੋ ਇਸਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ।
ਭਾਗ 2 ਵਿੱਚ, ਮੈਂ ਇਸ ਬਾਰੇ ਚਰਚ ਕਰਾਂਗਾ ਕਿ ਆਪਣੇ ਆਰਕੀਟੈਕਚਰ ਨੂੰ ਖਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਡਿਜ਼ਾਈਨ ਦੇ ਅਪਵਾਦਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ।