रिअल वर्ल्ड Tailwind CSS: द गेटकीपर आर्किटेक्चर

मोठ्या संस्था प्रत्येक व्यक्तीला प्रत्येक पेज स्टाईल करण्याची परवानगी देत नाहीत. त्यांचा कोड स्वच्छ ठेवण्यासाठी ते एका विशिष्ट रचनेचा (structure) वापर करतात.

Shopify Polaris सारख्या प्रगत डिझाइन सिस्टम्समध्ये दोन वेगळ्या भूमिका वापरल्या जातात:

  • Component Authors (The Gatekeepers): ही टीम मुख्य UI तयार करते. ते Tailwind classes लिहितात. ते accessibility, dark mode आणि design tokens व्यवस्थापित करतात.

  • Feature Developers (The Assemblers): ही टीम प्रॉडक्ट्स आणि डॅशबोर्ड्स तयार करते. त्यांचे लक्ष बिझनेस लॉजिक आणि लेआउटवर असते. ते रंग किंवा स्पेसिंग (spacing) निवडत नाहीत.

संस्था lint rules आणि code reviews द्वारे ही मर्यादा पाळली जाते याची खात्री करतात.

तुम्ही काय केले पाहिजे: • flex, grid आणि gap सारखी layout utilities वापरा.

तुम्ही काय टाळले पाहिजे: • feature pages मध्ये थेट bg-indigo-600 किंवा text-lg सारखे नवीन visual styles वापरणे टाळा. त्याऐवजी अस्तित्वात असलेला component वापरा.

कोडमध्ये हे कसे काम करते ते येथे पहा.

Design System Team @/components/ui/button.tsx मध्ये एक reusable button तयार करते. ते visual styles एकत्रित (centralize) करतात:

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>
  );
}

या रचनेचे तीन मुख्य फायदे आहेत:

  1. देखभालीसाठी सोपे (Easier maintenance): जर तुम्ही एखादे बटन काढले, तर तुमच्या मागे अनावश्यक (dead) CSS राहत नाही.
  2. जलद अपडेट्स (Fast updates): जर तुमचा ब्रँड indigo वरून violet झाला, तर तुम्हाला फक्त एक फाईल बदलावी लागेल. तो बदल संपूर्ण ॲपमध्ये लागू होईल.
  3. सुसंगतता (Consistency): प्रत्येक डेव्हलपर तेच design tokens वापरतो.

हे ध्येय केवळ Tailwind बद्दल नाही. हे सिस्टम तयार करणारे आणि ती वापरणारे यांच्यामध्ये एक सीमा निर्माण करण्याबद्दल आहे.

भाग २ मध्ये, मी तुमची architecture न बिघडवता design exceptions कशा प्रकारे हाताळायचे, यावर चर्चा करेन.

स्रोत: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36