टेलविंड सीएसएस v4: माइग्रेशन गाइड और नई सुविधाएँ

फ्रेमवर्क लॉन्च होने के बाद से टेलविंड सीएसएस v4 सबसे महत्वपूर्ण पुनर्लेखन है। जावास्क्रिप्ट कॉन्फ़िगरेशन फ़ाइल चली गई है - कस्टम गुणों का उपयोग करके सीएसएस-प्रथम कॉन्फ़िगरेशन द्वारा प्रतिस्थापित किया गया है। क्लास एपीआई काफी हद तक अपरिवर्तित है, लेकिन आंतरिक पूरी तरह से नए हैं: एक जंग-आधारित इंजन (oxide), पी 3 रंग सरगम ​​के लिए प्रथम श्रेणी का समर्थन, देशी कंटेनर क्वेरीज़, और एक बिल्ड पाइपलाइन जो पोस्टसीएसएस प्लगइन्स के बजाय सीधे सीएसएस के साथ एकीकृत होती है।

यह मार्गदर्शिका आपको बताती है कि क्या बदला, क्यों बदला, और एक वास्तविक उत्पादन एप्लिकेशन को टेलविंड v3 से v4 पर कैसे स्थानांतरित किया जाए। हम उन महत्वपूर्ण परिवर्तनों को कवर करेंगे जो आपको परेशान करेंगे और तुरंत अपनाने लायक नई सुविधाओं को कवर करेंगे।

मुख्य बातें

• tailwind.config.js को हटा दिया गया है - कॉन्फ़िगरेशन @theme निर्देश का उपयोग करके CSS में चला जाता है
• आयात @tailwind base/components/utilities से एकल @import "tailwindcss" में बदल गया
• कस्टम रंग अब --color-* नेमस्पेस के अंतर्गत CSS कस्टम गुणों का उपयोग करते हैं
• content कॉन्फ़िगरेशन स्वचालित है - टेलविंड v4 ग्लोब के माध्यम से फ़ाइलों को स्वचालित रूप से स्कैन करता है
• कंटेनर क्वेरीज़ अब @container और @sm:, @lg: वेरिएंट के साथ अंतर्निहित हैं
• सभी अंतर्निर्मित रंगों के लिए oklch() रंग स्थान के माध्यम से P3 रंग सरगम समर्थन
• @apply अभी भी काम करता है लेकिन CSS कस्टम गुणों के साथ कम आवश्यक है
• जेआईटी इंजन को ऑक्साइड (रस्ट) द्वारा प्रतिस्थापित किया गया है - नाटकीय रूप से तेज़ संकलन

---

क्या बदला और क्यों

टेलविंड v3 ने पोस्टसीएसएस को एक प्रोसेसिंग पाइपलाइन, एक जावास्क्रिप्ट कॉन्फ़िगरेशन फ़ाइल के रूप में उपयोग किया, और जावास्क्रिप्ट में लिखे जेआईटी इंजन के माध्यम से उपयोगिता कक्षाएं उत्पन्न कीं। इसने अच्छा काम किया लेकिन इसकी सीमाएँ थीं:

• कॉन्फ़िगरेशन के लिए जावास्क्रिप्ट की आवश्यकता होती है, जिससे यह केवल सीएसएस टूल से पहुंच योग्य नहीं हो जाता है
• कस्टम गुणों को टेलविंड कॉन्फ़िगरेशन से अलग से सेट किया जाना था
• कंटेनर प्रश्नों के लिए एक प्लगइन की आवश्यकता होती है
• रंग प्रणाली P3 सरगम का समर्थन नहीं करती

टेलविंड v4 ब्राउज़र के मूल सीएसएस कस्टम प्रॉपर्टी सिस्टम का उपयोग करके, सीएसएस में कॉन्फ़िगरेशन को स्थानांतरित करके और 5-10x तेज बिल्ड के लिए रस्ट में इंजन को फिर से लिखकर इन सभी को संबोधित करता है।

---

स्थापना

# Tailwind v4
pnpm add tailwindcss@^4.0.0 @tailwindcss/vite

# For Next.js
pnpm add tailwindcss@^4.0.0 @tailwindcss/postcss

@tailwindcss/vite प्लगइन सीधे Vite के साथ एकीकृत होता है। Next.js के लिए (जो आंतरिक रूप से PostCSS का उपयोग करता है), @tailwindcss/postcss का उपयोग करें।

---

सीएसएस-प्रथम कॉन्फ़िगरेशन

यह सबसे बड़ा वैचारिक परिवर्तन है. आपका globals.css टेलविंड कॉन्फ़िगरेशन के लिए सत्य का स्रोत बन जाता है:

/* Before: globals.css with v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* After: globals.css with v4 */
@import "tailwindcss";

/* Theme configuration replaces tailwind.config.js */
@theme {
  /* Custom colors as CSS custom properties */
  --color-brand-50: oklch(97% 0.02 250);
  --color-brand-100: oklch(94% 0.04 250);
  --color-brand-500: oklch(62% 0.18 250);
  --color-brand-900: oklch(28% 0.09 250);

  /* Custom font families */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom shadows */
  --shadow-card: 0 1px 3px oklch(0% 0 0 / 12%), 0 1px 2px oklch(0% 0 0 / 8%);
}

आपका tailwind.config.js हटाया जा सकता है (या अभी रखा जा सकता है - v4 माइग्रेशन के दौरान दोनों का समर्थन करता है)।

---

सामग्री का पता लगाना

टेलविंड v4 स्वचालित रूप से टेम्पलेट फ़ाइलों का पता लगाता है। आपके द्वारा v3 में सावधानीपूर्वक बनाए रखा गया content कॉन्फ़िगरेशन ख़त्म हो गया है:

// v3 tailwind.config.js — you needed this
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

V4 में, टेलविंड समझदार डिफ़ॉल्ट का उपयोग करके आपके प्रोजेक्ट को स्वचालित रूप से स्कैन करता है। यदि आपके पास असामान्य स्थानों पर फ़ाइलें हैं, तो आप उन्हें स्पष्ट रूप से शामिल कर सकते हैं:

@import "tailwindcss";
@source "../scripts/*.ts"; /* Scan additional paths */
@source "../../packages/ui/src/**/*.tsx"; /* Monorepo workspace packages */

---

पोस्टसीएसएस कॉन्फ़िगरेशन अपडेट

Next.js प्रोजेक्ट्स (और किसी भी PostCSS-आधारित सेटअप) के लिए, अपना PostCSS कॉन्फिगरेशन अपडेट करें:

// Before: postcss.config.js with v3
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// After: postcss.config.mjs with v4
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

autoprefixer डिफ़ॉल्ट रूप से @tailwindcss/postcss में शामिल है। अलग autoprefixer निर्भरता हटाएँ।

---

रंग प्रणाली: ओकेएलसीएच

टेलविंड v4 अपने अंतर्निर्मित रंग पैलेट के लिए OKLCH का उपयोग करता है। ओकेएलसीएच एक अवधारणात्मक रूप से समान रंग का स्थान है - एचएसएल के विपरीत, हल्केपन को समायोजित करना वास्तव में मानव आंख के बराबर चरणों जैसा दिखता है।

/* v4 colors use OKLCH internally */
/* bg-blue-500 generates: */
background-color: oklch(62.8% 0.258 264.1);

/* Custom colors with OKLCH */
@theme {
  --color-ecosire-amber: oklch(78% 0.18 80);
  --color-ecosire-navy: oklch(22% 0.04 250);
}

व्यापक सरगम ​​डिस्प्ले (अधिकांश आधुनिक फोन और मैक) के लिए, ओकेएलसीएच उन रंगों को सक्षम करता है जिन्हें एसआरजीबी आसानी से प्रदर्शित नहीं कर सकता है। oklch() मान स्वचालित रूप से उन डिस्प्ले के लिए rgb() में परिवर्तित हो जाते हैं जो P3 का समर्थन नहीं करते हैं।

---

कंटेनर क्वेरीज़ - अंतर्निहित

कंटेनर क्वेरीज़ अब v4 में प्रथम श्रेणी की हैं। किसी प्लगइन की आवश्यकता नहीं:

/* Define a container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

<!-- Responsive based on parent container, not viewport -->
<div class="card-wrapper">
  <div class="@sm:flex-row @lg:grid-cols-3 flex flex-col">
    <!-- Layout changes based on container width, not screen width -->
  </div>
</div>

यह घटक-स्तरीय जवाबदेही को सक्षम बनाता है - एक साइडबार कार्ड और एक पूर्ण-चौड़ाई वाले कार्ड में अलग-अलग सीएसएस के बिना अलग-अलग लेआउट हो सकते हैं।

नामित कंटेनर आपको विशिष्ट पूर्वजों को लक्षित करने देते हैं:

<div class="card-wrapper [container-name:card]">
  <div class="@card/sm:text-lg text-base">
    Responsive to the 'card' container
  </div>
</div>

---

सीएसएस कस्टम गुण एकीकरण

@theme में परिभाषित कस्टम गुण हर जगह पहुंच योग्य हैं - सीएसएस, जावास्क्रिप्ट, और डिज़ाइन टूल जो सीएसएस चर पढ़ते हैं:

@theme {
  --color-primary: oklch(62% 0.18 250);
  --spacing-section: 5rem;
}

// Access in JavaScript/TypeScript
const style = getComputedStyle(document.documentElement);
const primary = style.getPropertyValue('--color-primary');

<!-- Use in inline styles -->
<div style={{ color: 'var(--color-primary)' }}>
  Themed content
</div>

यह tailwind.config.js और tokens.ts फ़ाइल में समानांतर मान बनाए रखने के पैटर्न को प्रतिस्थापित करता है - अब CSS में सत्य का एक ही स्रोत है।

---

परिवर्तन तोड़ना

1. प्लगइन एपीआई परिवर्तन

addBase, addComponents, addUtilities का उपयोग करने वाले v3 प्लगइन्स v4 के साथ असंगत हैं। नई परत प्रणाली का उपयोग करके उन्हें सीएसएस के रूप में फिर से लिखें:

/* v3 plugin equivalent in v4 CSS */
@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
}

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium;
  }
}

2. कस्टम कक्षाओं के साथ @apply

गैर-टेलविंड कक्षाओं के साथ @apply v4 में अधिक प्रतिबंधित है। @apply का उपयोग केवल वास्तविक उपयोगिता वर्गों के साथ करें:

/* This works in v4 */
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}

/* This is deprecated — use regular CSS instead */
.btn-primary {
  @apply custom-shadow; /* custom-shadow is not a Tailwind utility */
}

3. tailwind.config.js theme.extend चला गया

जेएस में कॉन्फ़िगरेशन अब प्राथमिक पथ नहीं है। सीएसएस में @theme का प्रयोग करें। यदि आपके पास दोनों हैं, तो सीएसएस कॉन्फ़िगरेशन को प्राथमिकता दी जाती है।

4. डिफ़ॉल्ट रंग पैलेट नामकरण

v4 में कुछ रंगों के नाम बदले गए। उन्हें पकड़ने के लिए आधिकारिक कोडमॉड चलाएँ:

npx @tailwindcss/upgrade@next --config tailwind.config.js

---

प्रवासन रणनीति

बड़े उत्पादन अनुप्रयोग के लिए, क्रमिक रूप से माइग्रेट करें:

चरण 1: अद्यतन स्थापना

pnpm remove tailwindcss autoprefixer postcss
pnpm add tailwindcss@^4.0.0 @tailwindcss/postcss

अद्यतन postcss.config.mjs:

export default {
  plugins: { '@tailwindcss/postcss': {} },
};

अद्यतन globals.css:

/* Replace the three @tailwind directives */
@import "tailwindcss";

चरण 2: कोडमॉड चलाएँ

npx @tailwindcss/upgrade@next

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

चरण 3: कॉन्फिगरेशन को सीएसएस में ले जाएं

अपना tailwind.config.js थीम मान लें और उन्हें अपने CSS में @theme पर ले जाएं। सत्यापन के बाद कॉन्फ़िग फ़ाइल हटाएँ।

चरण 4: नई सुविधाएँ अपनाएँ

जहां उपयुक्त हो, व्यूपोर्ट-आधारित प्रतिक्रियाशील ब्रेकप्वाइंट को कंटेनर क्वेरी से बदलें। P3 सरगम ​​समर्थन प्राप्त करने के लिए कस्टम रंगों के लिए OKLCH को अपनाएं।

---

प्रदर्शन में सुधार

टेलविंड v4 का ऑक्साइड इंजन (रस्ट) काफी तेजी से निर्माण प्रदान करता है:

बड़े अनुप्रयोगों के लिए, यह विकास में काफी तेज एचएमआर और काफी कम सीआई निर्माण समय का अनुवाद करता है।

---

वास्तविक-विश्व प्रवासन उदाहरण

यहां डिज़ाइन सिस्टम के आधार कॉन्फ़िगरेशन के लिए पहले/बाद का व्यावहारिक तरीका दिया गया है:

// Before: tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fef3c7',
          500: '#f59e0b',
          900: '#78350f',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,0.12)',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
};

/* After: globals.css (v4) */
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

@theme {
  --color-brand-50: oklch(97% 0.04 85);
  --color-brand-500: oklch(78% 0.18 85);
  --color-brand-900: oklch(33% 0.08 85);

  --font-sans: 'Inter', system-ui, sans-serif;

  --shadow-card: 0 1px 3px oklch(0% 0 0 / 12%);
}

सीएसएस-मूल कॉन्फ़िगरेशन अधिक संक्षिप्त है और कॉन्फ़िगरेशन को पढ़ने के लिए node_modules निर्भरता को समाप्त करता है।

---

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

क्या मुझे टेलविंड.कॉन्फिग.जेएस को तुरंत हटाने की आवश्यकता है?

नहीं - टेलविंड v4 माइग्रेशन के दौरान जेएस कॉन्फिगरेशन और सीएसएस कॉन्फिगरेशन दोनों को एक साथ सपोर्ट करता है। JS कॉन्फ़िगरेशन अभी भी काम करता है, लेकिन CSS में @theme जैसी सुविधाएं इसके बिना ही उपलब्ध हैं। क्रमिक रूप से माइग्रेट करें: पहले v4 के साथ ऐप बिल्डिंग प्राप्त करें, फिर धीरे-धीरे कॉन्फ़िगरेशन को CSS में ले जाएं, फिर जब आप आश्वस्त हों तो JS कॉन्फ़िगरेशन हटा दें।

क्या मेरी मौजूदा टेलविंड v3 कक्षाएं अभी भी v4 में काम करेंगी?

उपयोगिता वर्गों का विशाल बहुमत अपरिवर्तित है। कुछ रंग नाम अद्यतन किए गए (कुछ संदर्भों में ग्रे → तटस्थ), और कुछ अप्रचलित उपयोगिताएँ हटा दी गईं। अधिकांश समस्याओं को स्वचालित रूप से पकड़ने के लिए npx @tailwindcss/upgrade@next चलाएँ। मुख्य असंगतताएँ प्लगइन्स और कस्टम थीम कॉन्फ़िगरेशन में हैं, न कि आप HTML/JSX में कक्षाओं का उपयोग कैसे करते हैं।

क्या OKLCH सभी ब्राउज़रों में समर्थित है?

OKLCH सभी आधुनिक ब्राउज़रों (Chrome 111+, Firefox 113+, Safari 15.4+) में समर्थित है। टेलविंड v4 आवश्यकता पड़ने पर पुराने ब्राउज़रों के लिए फ़ॉलबैक उत्पन्न करता है। P3 रंग सरगम ​​(विस्तारित रंग) के लिए, समर्थन के लिए एक विस्तृत-सरगम डिस्प्ले और एक सहायक ब्राउज़र दोनों की आवश्यकता होती है - टेलविंड संकीर्ण सरगम ​​​​डिस्प्ले के लिए rgb() फ़ॉलबैक उत्पन्न करता है।

मैं shadcn/ui के साथ टेलविंड v4 का उपयोग कैसे करूं?

shadcn/ui 2.0+ टेलविंड v4 को सपोर्ट करता है। v4 CSS वेरिएबल प्रारूप का उपयोग करने के लिए अपने components.json को अपडेट करें। घटक लाइब्रेरी थीमिंग के लिए सीएसएस कस्टम गुणों का उपयोग करती है, जो स्वाभाविक रूप से टेलविंड v4 के @theme सिस्टम पर मैप होती है। v4-संगत कॉन्फ़िगरेशन प्राप्त करने के लिए मौजूदा प्रोजेक्ट में npx shadcn@latest init चलाएँ।

क्या नए कॉन्फ़िगरेशन के लिए टाइपस्क्रिप्ट प्रकार हैं?

टेलविंड v4 का कॉन्फ़िगरेशन CSS है, इसलिए कॉन्फ़िगरेशन के लिए कोई टाइपस्क्रिप्ट प्रकार नहीं हैं। आईडीई समर्थन सीएसएस भाषा सेवाओं से आता है जो कस्टम गुणों को समझते हैं। टाइपस्क्रिप्ट (चार्ट, एनिमेशन आदि के लिए) में थीम मानों तक पहुंचने के लिए, रनटाइम पर सीएसएस कस्टम गुणों को पढ़ने के लिए getComputedStyle का उपयोग करें, या अपने निर्माण के हिस्से के रूप में अपने सीएसएस से एक टोकन फ़ाइल उत्पन्न करें।

---

अगले चरण

टेलविंड सीएसएस v4 नई परियोजनाओं और मौजूदा परियोजनाओं के लिए योजना बनाने के लिए अपनाने लायक एक महत्वपूर्ण अपग्रेड है। ECOSIRE का फ्रंटएंड स्टैक एक व्यापक डिजाइन प्रणाली के साथ 249 पेज के नेक्स्ट.जेएस 16 एप्लिकेशन पर उत्पादन में टेलविंड सीएसएस v4.1 चलाता है।

टेलविंड v4 माइग्रेशन में मदद चाहिए या शुरू से ही डिज़ाइन सिस्टम बनाना चाहते हैं? हमारी फ्रंटएंड इंजीनियरिंग सेवाओं का अन्वेषण करें यह देखने के लिए कि हम कैसे मदद कर सकते हैं।