𝗥𝗲𝗮𝗹 𝗪𝗼𝗿𝗹𝗱 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: 𝗧𝗵𝗲 𝗚𝗮𝘁𝗲𝗸𝗲𝗲𝗽𝗲𝗿 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲

పెద్ద సంస్థలు ప్రతి ఒక్కరినీ ప్రతి పేజీని స్టైల్ చేయనివ్వవు. తమ కోడ్‌ను క్లీన్‌గా ఉంచుకోవడానికి వారు ఒక నిర్దిష్ట నిర్మాణాన్ని (structure) ఉపయోగిస్తారు.

Shopify Polaris వంటి పరిణతి చెందిన డిజైన్ సిస్టమ్స్ రెండు వేర్వేరు పాత్రలను ఉపయోగిస్తాయి:

  • Component Authors (గేట్‌కీపర్స్): ఈ టీమ్ కోర్ UIని నిర్మిస్తుంది. వీరు Tailwind classes రాస్తారు. వీరు accessibility, dark mode మరియు design tokensలను నిర్వహిస్తారు.

  • Feature Developers (అసెంబ్లర్స్): ఈ టీమ్ ప్రొడక్ట్స్ మరియు డాష్‌బోర్డ్‌లను నిర్మిస్తుంది. వీరు బిజినెస్ లాజిక్ మరియు లేఅవుట్‌పై దృష్టి పెడతారు. వీరు రంగులు లేదా స్పేసింగ్‌ను ఎంచుకోరు.

సంస్థలు lint rules మరియు code reviews ద్వారా ఈ సరిహద్దును అమలు చేస్తాయి.

మీరు చేయవలసినవి: • flex, grid, మరియు gap వంటి layout utilities ఉపయోగించండి.

మీరు నివారించవలసినవి: • feature పేజీల లోపల నేరుగా bg-indigo-600 లేదా text-lg వంటి కొత్త విజువల్ స్టైల్స్‌ను జోడించడం. దానికి బదులుగా ఇప్పటికే ఉన్న componentను ఉపయోగించండి.

కోడ్‌లో ఇది ఎలా పనిచేస్తుందో ఇక్కడ చూడండి.

Design System టీమ్ @/components/ui/button.tsxలో ఒక reusable buttonను సృష్టిస్తుంది. వారు విజువల్ స్టైల్స్‌ను సెంట్రలైజ్ చేస్తారు:

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes { 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} ); }

ఆ తర్వాత Feature Developer ఈ బ్లాక్‌లను అసెంబుల్ చేయడం ద్వారా పేజీని నిర్మిస్తారు:

import { Button } from "@/components/ui/button";

export default function Dashboard() { return (

); }

ఈ నిర్మాణం మూడు ప్రధాన ప్రయోజనాలను అందిస్తుంది:

  1. సులభమైన మెయింటెనెన్స్ (Maintenance). మీరు ఒక బటన్‌ను తొలగిస్తే, అనవసరమైన (dead) CSS మిగిలిపోదు.
  2. వేగవంతమైన అప్‌డేట్స్. మీ బ్రాండ్ రంగు indigo నుండి violet కి మారితే, మీరు కేవలం ఒక ఫైల్‌ను మార్చితే సరిపోతుంది. ఆ మార్పు మొత్తం యాప్‌లో కనిపిస్తుంది.
  3. స్థిరత్వం (Consistency). ప్రతి డెవలపర్ ఒకే రకమైన design tokensను ఉపయోగిస్తారు.

లక్ష్యం కేవలం Tailwind గురించి మాత్రమే కాదు. సిస్టమ్‌ను నిర్మించేవారికి మరియు దానిని ఉపయోగించేవారికి మధ్య ఒక సరిహద్దును సృష్టించడం దీని ముఖ్య ఉద్దేశ్యం.

పార్ట్ 2లో, మీ ఆర్కిటెక్చర్‌ను దెబ్బతీయకుండా డిజైన్ ఎక్సెప్షన్స్‌ను ఎలా నిర్వహించాలో నేను చర్చిస్తాను.

మూలం: https://dev.to/cathylai/real-world-tailwind-css-the-gatekeeper-architecture-a-senior-developers-guide-part-12-m36