Tailwind CSS Academy · पाठ

टोकन का दस्तावेज़ीकरण और संचालन

अपने टोकन सिस्टम का दस्तावेज़ीकरण करें, नामकरण परंपराएँ लागू करें और बढ़ते डिज़ाइन सिस्टम में टोकन की एकरूपता बनाए रखने के लिए समीक्षा प्रक्रियाएँ स्थापित करें।

पाठ 4, कुल 4 में से13 चरण

टोकन का दस्तावेज़ीकरण और संचालन, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

टोकन का संचालन क्यों महत्वपूर्ण है

संचालन के बिना डिज़ाइन टोकन प्रणाली जल्दी ही अव्यवस्थित हो जाती है। नियम न होने पर डेवलपर मनमाने ढंग से टोकन जोड़ते हैं, नामों में असंगति आती है और प्रणाली का रखरखाव कठिन हो जाता है। टोकन संचालन का अर्थ है स्पष्ट स्वामित्व, नामकरण परंपराएँ, बदलाव की प्रक्रियाएँ और दस्तावेज़ीकरण मानक स्थापित करना, ताकि टीम और कोडबेस के बढ़ने के साथ टोकन परत बोझ बनने के बजाय उपयोगी संपत्ति बनी रहे।

नामकरण परंपरा स्थापित करना

एक नामकरण परंपरा चुनें और उसे हर टोकन पर एकरूपता से लागू करें। व्यापक रूप से अपनाया गया एक प्रारूप category-role-variant है — उदाहरण के लिए color-action-primary, color-action-secondary, color-feedback-error, spacing-layout-section। इस परंपरा को एक समर्पित फ़ाइल में दर्ज करें, ताकि हर योगदानकर्ता समझ सके कि प्रत्येक खंड का क्या अर्थ है और नए टोकन को किस श्रेणी में रखा जाना चाहिए।

/*
  Naming convention: --{category}-{role}-{variant}

  Categories: color, spacing, font, radius, shadow, motion
  Roles: action, surface, text, border, feedback
  Variants: primary, secondary, muted, inverse, hover, active, disabled

  Examples:
  --color-action-primary
  --color-action-primary-hover
  --color-feedback-error
  --color-surface-overlay
  --spacing-layout-section
  --font-heading-weight
*/

टोकन श्रेणियाँ और वर्गीकरण

टोकनों को परिभाषित श्रेणियों वाले स्पष्ट वर्गीकरण में व्यवस्थित करें। सामान्य श्रेणियों में color (ब्रांड, प्रतिक्रिया, तटस्थ), typography (फ़ॉन्ट परिवार, आकार, मोटाई, पंक्ति-ऊँचाई), spacing (लेआउट, कॉम्पोनेंट, आंतरिक अंतर), radius, shadow और motion (अवधि, सहजता) शामिल हैं। स्पष्ट श्रेणियाँ होने से डिज़ाइनर और डेवलपर नया टोकन बनाने से पहले मौजूदा टोकन आसानी से खोज सकते हैं।

// tokens/taxonomy.js
const TOKEN_CATEGORIES = {
  color: ['brand', 'neutral', 'feedback', 'surface', 'text'],
  typography: ['family', 'size', 'weight', 'lineHeight', 'tracking'],
  spacing: ['layout', 'component', 'inset'],
  shape: ['radius'],
  elevation: ['shadow'],
  motion: ['duration', 'easing']
};

// Validate a new token name
function validateTokenName(name) {
  const [cat] = name.split('-');
  return Object.keys(TOKEN_CATEGORIES).includes(cat);
}

टोकन का दस्तावेज़ीकरण लिखना

हर टोकन के दस्तावेज़ीकरण में उसका उद्देश्य, उपयोग के उदाहरण और उन स्थानों से जुड़ी सीमाएँ स्पष्ट होनी चाहिए जहाँ उसका उपयोग किया जाना चाहिए या नहीं किया जाना चाहिए। इस दस्तावेज़ीकरण को टोकन परिभाषा के साथ ही रखें — या तो टोकन फ़ाइल में टिप्पणियों के रूप में, या टोकन फ़ाइलों से तैयार की गई समर्पित दस्तावेज़ साइट में। Style Dictionary जैसे स्वचालित दस्तावेज़ीकरण उपकरण टोकन JSON फ़ाइलों से HTML संदर्भ तैयार कर सकते हैं।

// tokens/documented.js
module.exports = {
  'color-action-primary': {
    value: '#3b82f6',
    description: 'Primary interactive action color. Use for buttons, links, and focus rings.',
    usage: ['bg-action-primary', 'text-action-primary', 'border-action-primary'],
    doNot: 'Do not use for decorative elements. Use color-brand-accent instead.'
  },
  'color-feedback-error': {
    value: '#dc2626',
    description: 'Error state color. Use for validation messages and destructive actions.',
    usage: ['text-feedback-error', 'border-feedback-error'],
    doNot: 'Do not use for warnings. Use color-feedback-warning instead.'
  }
};

बदलाव नियंत्रण प्रक्रिया

टोकन डिज़ाइन और इंजीनियरिंग के बीच साझा अनुबंध होते हैं। किसी टोकन का मान बदलने से उसे इस्तेमाल करने वाला हर कॉम्पोनेंट एक साथ प्रभावित होता है। बदलाव नियंत्रण प्रक्रिया स्थापित करें: प्रस्तावित बदलाव मर्ज करने से पहले डिज़ाइन समीक्षा, डेवलपर प्रभाव आकलन और परीक्षण चरण से गुजरें। टोकन का नाम बदलना या उसे हटाना जैसे विघटनकारी बदलावों के लिए अपग्रेड मार्गदर्शिका और बहिष्करण अवधि आवश्यक है, ताकि उपभोक्ता टीमों का काम न टूटे।

/* Deprecation example: renaming a token */

/*
  DEPRECATED: --color-primary is deprecated.
  Use --color-action-primary instead.
  Will be removed in v3.0 (target: 2026-09-01)
*/
:root {
  --color-primary: var(--color-action-primary); /* alias */
  --color-action-primary: #3b82f6;              /* canonical */
}

/* Linting rule to warn on deprecated token usage */

टोकन उपयोग की लिंटिंग

स्वचालित लिंटिंग हार्डकोड किए गए मानों के आकस्मिक प्रवेश को रोकती है और टोकन के उपयोग को लागू करती है। eslint-plugin-tailwindcss को इस तरह कॉन्फ़िगर करें कि जहाँ टोकन मौजूद हो, वहाँ bg-[#3b82f6] जैसे मनमाने मान इस्तेमाल होने पर चेतावनी मिले। CSS फ़ाइलों के लिए, कस्टम stylelint नियम उन स्थानों पर कच्चे हेक्स मानों को चिह्नित कर सकता है जहाँ वेरिएबल का उपयोग होना चाहिए। ये स्वचालित जाँचें समस्या को कोड समीक्षा तक पहुँचने से पहले पकड़ लेती हैं।

// .eslintrc.js
module.exports = {
  plugins: ['tailwindcss'],
  rules: {
    'tailwindcss/no-arbitrary-value': 'warn',
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/no-contradicting-classname': 'error'
  }
};

// .stylelintrc.json
{
  "rules": {
    "color-no-hex": [true, {
      "message": "Use a CSS variable token instead of a raw hex value"
    }]
  }
}

टोकन संस्करण निर्धारण रणनीति

अपनी टोकन प्रणाली को अर्थपूर्ण संस्करण निर्धारण वाले प्रकाशित API की तरह मानें। जोड़ात्मक बदलाव (नए टोकन या मौजूदा टोकनों के नए मान) लघु संस्करण होते हैं। विघटनकारी बदलाव (नाम बदलना, हटाना या दृश्य रूप को प्रभावित करने वाले मान बदलना) प्रमुख संस्करण होते हैं। टोकन पैकेज के लिए CHANGELOG.md का उपयोग करें और हर बदलाव के साथ उसका संस्करण, प्रभावित टोकन और उपभोक्ताओं के लिए स्थानांतरण निर्देश दर्ज करें।

// tokens/CHANGELOG.md
/*
  ## v2.1.0 — 2026-06-15
  ### Added
  - color-action-ghost: new ghost button surface color
  - motion-duration-slow: 500ms for large layout transitions

  ## v2.0.0 — 2026-05-01
  ### BREAKING
  - Renamed: --color-primary → --color-action-primary
    Migration: replace all var(--color-primary) with var(--color-action-primary)
  - Removed: --color-accent (unused after brand refresh)
*/

डिज़ाइन-डेवलपर टोकन समन्वय

डिज़ाइन उपकरणों के टोकनों (Figma वेरिएबलों) को कोड टोकनों के साथ समकालिक रखना संचालन की सबसे कठिन चुनौतियों में से एक है। Token Studio for Figma या Theo जैसे उपकरण Figma वेरिएबलों को सीधे JSON में निर्यात कर सकते हैं, जिसे बाद में बिल्ड स्क्रिप्ट Tailwind कॉन्फ़िगरेशन मानों में बदल सकती है। इससे मैन्युअल समन्वय चरण हट जाता है और यह सुनिश्चित होता है कि डिज़ाइन और कोड टोकन मानों पर हमेशा सहमत रहें।

// scripts/sync-tokens.js
// Run after exporting tokens from Figma Token Studio
const figmaTokens = require('./tokens/figma-export.json');

const tailwindColors = {};
Object.entries(figmaTokens.color).forEach(([key, token]) => {
  // Convert Figma token format to Tailwind format
  const cssVarName = '--color-' + key.replace(/\./g, '-');
  tailwindColors[key.replace(/\./g, '-')] =
    'var(' + cssVarName + ')';
});

console.log('Synced', Object.keys(tailwindColors).length, 'color tokens');

टोकन संचालन की भूमिकाएँ

प्रभावी संचालन के लिए स्पष्ट रूप से परिभाषित भूमिकाएँ आवश्यक हैं। Token Steward (आमतौर पर वरिष्ठ डिज़ाइनर या डिज़ाइन सिस्टम प्रमुख) वर्गीकरण का स्वामी होता है और नए टोकन प्रस्तावों को मंज़ूरी देता है। Contributors (डिज़ाइनर और डेवलपर) मानकीकृत टेम्पलेट वाली पुल रिक्वेस्ट के माध्यम से टोकन बदलाव अनुरोध भेजते हैं। Consumers (फ़ीचर टीमें) टोकनों का केवल-पठन उपयोग करते हैं और सीधे टोकन जोड़ने के बजाय समर्पित चैनल के माध्यम से सुधार अनुरोध भेजते हैं।

/*
  Token Change Request Template (GitHub PR description)

  ## Token Change Request

  **Type**: [ ] Add  [ ] Modify  [ ] Deprecate  [ ] Remove

  **Token name**: color-action-destructive

  **Proposed value**: #dc2626

  **Rationale**: Needed for delete button component.
  Existing danger token is for form validation only.

  **Impact**: 0 existing usages (new token)

  **Design approval**: @designlead
*/

टोकन कवरेज का ऑडिट

समय-समय पर अपने टोकन कवरेज का ऑडिट करें, ताकि संचालन प्रक्रिया से बच निकले हार्डकोड किए गए मान मिल सकें। एक कवरेज रिपोर्ट सभी HTML, JSX और CSS फ़ाइलों में कच्चे रंग मानों, स्पेसिंग मापक्रम का उपयोग न करने वाली स्पष्ट अंतराल संख्याओं और मनमाने Tailwind मानों को खोजती है। उच्च-कवरेज वाली परियोजनाओं में हार्डकोड किए गए मान लगभग शून्य होते हैं; हर चीज़ टोकन के माध्यम से आती है। दृश्य शैली परिभाषित करने वाली किसी भी फ़ाइल में 95% से अधिक टोकन कवरेज का लक्ष्य रखें।

// scripts/token-coverage-audit.js
const fs = require('fs');
const glob = require('glob');

const hardcodedColorRegex = /#[0-9a-fA-F]{3,8}|rgb\(|hsl\(/g;
const arbitraryColorRegex = /\[#[0-9a-fA-F]{3,8}\]/g;

const files = glob.sync('src/**/*.{html,jsx,tsx,css}');
let totalViolations = 0;

files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const matches = [...(content.match(hardcodedColorRegex) || [])];
  if (matches.length) {
    console.log(file + ':', matches.length, 'violations');
    totalViolations += matches.length;
  }
});

console.log('Total violations:', totalViolations);

Storybook के साथ जीवंत दस्तावेज़ीकरण

सर्वोत्तम टोकन दस्तावेज़ीकरण जीवंत दस्तावेज़ीकरण होता है — ऐसे उदाहरण जो वास्तविक समय में वास्तविक टोकनों से रेंडर होने के कारण हमेशा अद्यतित रहते हैं। एक Storybook पृष्ठ बनाएँ, जो सक्रिय टोकन मानों का उपयोग करके रंग पट्टिका, स्पेसिंग मापक्रम और टाइपोग्राफी नमूना प्रदर्शित करे। चूँकि ये स्टोरी उत्पादन में उपयोग होने वाले उन्हीं CSS वेरिएबलों से मान लेती हैं, इसलिए वे वास्तविक टोकन मानों से कभी असंगत नहीं हो सकतीं।

// stories/Tokens/ColorPalette.stories.jsx
const SEMANTIC_COLORS = [
  { name: 'Action Primary', cls: 'bg-action-primary', var: '--color-action-primary' },
  { name: 'Feedback Error', cls: 'bg-feedback-error', var: '--color-feedback-error' },
  { name: 'Surface Base', cls: 'bg-surface-base border', var: '--color-surface-base' }
];

export default { title: 'Design Tokens/Colors' };

export const SemanticPalette = () => (
  <div class="grid grid-cols-3 gap-4 p-6">
    {SEMANTIC_COLORS.map(c => (
      <div key={c.name}>
        <div class={c.cls + ' h-16 rounded-lg mb-2'} />
        <p class="text-sm font-medium">{c.name}</p>
        <code class="text-xs text-gray-500">{c.var}</code>
      </div>
    ))}
  </div>
);

त्वरित जाँच

इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

इस पाठ में आपने सीखा: नामकरण परंपराएँ और स्पष्ट वर्गीकरण टोकनों की अनावश्यक वृद्धि को रोकते हैं, बहिष्करण अवधियों वाली बदलाव नियंत्रण प्रक्रियाएँ विघटनकारी बदलावों को सुरक्षित रूप से सँभालती हैं, और स्वचालित लिंटिंग तथा कवरेज ऑडिट पूरे कोडबेस में टोकन के उपयोग को लागू करते हैं। आगे हम React और Next.js के साथ Tailwind पर जाएँगे और परियोजना सेटअप से शुरुआत करेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “टोकन का दस्तावेज़ीकरण और संचालन” पाठ निःशुल्क है?

हाँ—“टोकन का दस्तावेज़ीकरण और संचालन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“टोकन का दस्तावेज़ीकरण और संचालन” में मैं क्या सीखूँगा?

अपने टोकन सिस्टम का दस्तावेज़ीकरण करें, नामकरण परंपराएँ लागू करें और बढ़ते डिज़ाइन सिस्टम में टोकन की एकरूपता बनाए रखने के लिए समीक्षा प्रक्रियाएँ स्थापित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“टोकन का दस्तावेज़ीकरण और संचालन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ