अलविदा टेलविंड.कॉन्फिग.जेएस: टेलविंड v4 क्या बदलता है? (V4)

टेलविंड सीएसएस v4 यहाँ है, और यह एक साधारण संस्करण अपडेट से कहीं अधिक है। हमारे पास यहां एक पुन: डिज़ाइन किया गया इंजन और दर्शन है जो मूल रूप से डेवलपर अनुभव (डीएक्स) को बदल देता है। v4 एक पुनर्जन्म का प्रतिनिधित्व करता है क्योंकि टेलविंड जावास्क्रिप्ट पारिस्थितिकी तंत्र में अपनी जड़ों से अलग हो जाता है और "ऑक्साइड" नामक अपने नए इंजन के साथ सीधे सीएसएस के केंद्र में चला जाता है।

यह रिलीज़ प्रदर्शन से लेकर कॉन्फ़िगरेशन विधियों तक, टेलविंड के साथ हमारे काम करने के तरीके को नया आकार देती है। इस लेख में, हम v4 के साथ आने वाले सबसे प्रभावशाली परिवर्तनों पर गहराई से नज़र डालेंगे और जिनके बारे में प्रत्येक डेवलपर को पता होना चाहिए।

सबसे महत्वपूर्ण परिवर्तन: जावास्क्रिप्ट कॉन्फ़िगरेशन से सीएसएस पर स्विच करना

शायद सबसे आमूल-चूल परिवर्तन यह है कि कॉन्फ़िगरेशन प्रक्रिया को tailwind.config.js से सीधे आपकी मुख्य CSS फ़ाइल में ले जाया जाता है। अब आप एक ही सीएसएस फ़ाइल के माध्यम से अपने सभी अनुकूलन, प्लगइन्स और थीम सेटिंग्स प्रबंधित करेंगे।

यह एक रणनीतिक कदम है. जैसा कि टेलविंड निर्माता एडम वाथन कहते हैं:

"टेलविंड सीएसएस v4.0 का एक मुख्य लक्ष्य फ्रेमवर्क को सीएसएस-मूल बनाना है न कि जावास्क्रिप्ट लाइब्रेरी की तरह।"

यह "सीएसएस-मूल" दृष्टिकोण यह देखने की सुविधा देता है कि सीएसएस सिंटैक्स के भीतर अब सभी संरचना को कैसे संभाला जाता है।

@थीम से मिलें: आपका नया कॉन्फ़िगरेशन केंद्र

थीम अनुकूलन (रंग, ब्रेकप्वाइंट, फ़ॉन्ट) अब @theme ब्लॉक के भीतर CSS कस्टम गुणों का उपयोग करके बनाए जाते हैं। यह केवल एक वाक्यात्मक परिवर्तन नहीं है; यह आपके सभी डिज़ाइन टोकन (जैसे --color-neon-pink) को रनटाइम पर जावास्क्रिप्ट से पहुंच योग्य बनाता है।

टेलविंड v3 (tailwind.config.js):```javascript

module.exports = { theme: { extend: { colors: { 'neon-pink': '#ff00ff', }, screens: { '3xl': '1920px', }, }, }, } #### टेलविंड v4 (आपकी मुख्य सीएसएस फ़ाइल में):css @theme { --color-neon-pink: #ff00ff; --breakpoint-3xl: 1920px; } ```इस परिवर्तन के साथ, कुछ नामकरण मानक बन गए: v3 में screens v4 में --breakpoint-* हो गए, और colors को --color-* में अद्यतन किया गया। यह दृष्टिकोण कॉन्फ़िगरेशन को अधिक सहज और सीएसएस प्रवाह के अनुरूप बनाता है।

नया "ऑक्साइड" इंजन: प्रदर्शन क्रांति

टेलविंड v4 के केंद्र में "ऑक्साइड" नामक एक नया इंजन है, जो प्रदर्शन को अधिकतम करने के लिए शुरू से ही लिखा गया है। यह इंजन हाइब्रिड दृष्टिकोण अपनाता है:

• रस्ट: सबसे अधिक प्रदर्शन-महत्वपूर्ण और समानांतर कार्य (जैसे सीएसएस पार्सिंग) रस्ट में लिखे गए हैं।
• टाइपस्क्रिप्ट: फ्रेमवर्क का मुख्य तर्क और विस्तारशीलता (प्लगइन एपीआई) टाइपस्क्रिप्ट में रहता है।

यह नया आर्किटेक्चर PostCSS पर निर्भरता को समाप्त करता है और मूल रूप से लाइटनिंग CSS का उपयोग करके एक ऑल-इन-वन टूलचेन प्रदान करता है। अब आपको @import हैंडलिंग या ब्राउज़र प्रीफ़िक्स (ऑटोप्रिफ़िक्सर) के लिए अतिरिक्त टूल की आवश्यकता नहीं है।

प्रदर्शन मेट्रिक्स

परिणाम प्रभावशाली हैं:

• 5x तक तेज पूर्ण निर्माण
• 100x से अधिक तेज़ वृद्धिशील निर्माण (आमतौर पर माइक्रोसेकंड में मापा जाता है)
• 35% से अधिक छोटा इंस्टॉलेशन आकार

यह गति वृद्धि विशेष रूप से बड़ी परियोजनाओं पर संकलन समय की प्रतीक्षा को समाप्त करके विकास प्रक्रिया को अधिक सुचारू बनाती है।

शून्य कॉन्फ़िगरेशन: स्वचालित सामग्री का पता लगाना

v3 में, हमें मैन्युअल रूप से निर्दिष्ट करना था कि फ्रेमवर्क content सरणी के भीतर कौन सी फ़ाइलों को स्कैन करेगा। v4 इस दायित्व को समाप्त करता है।

टेलविंड v3 दृष्टिकोण```javascript

// tailwind.config.js (TAILWIND v3)

module.exports = { /**

• BURASI ZORUNLUYDU:
• Projedeki tüm şablon dosyalarının yollarını manuel olarak
• glob desenleri (patterns) kullanarak belirtmeniz gerekiyordu. / content: [ './src/pages/**/.{js,ts,jsx,tsx,mdx}', './src/components//*.{js,ts,jsx,tsx,mdx}', './src/app//*.{js,ts,jsx,tsx,mdx}', './public/index.html', // Yeni bir klasör eklerseniz (örn: './src/layouts/'), burayı güncellemeniz gerekirdi. ],

theme: { extend: { // ... }, },

plugins: [], } ### टेलविंड v4 दृष्टिकोणcss /* main.css (TAILWIND v4) */

/*

• 1. Tailwind'i içe aktarıyoruz. */ @import "tailwindcss";

/*

• 2. Temamızı yapılandırıyoruz.
• DİKKAT:
• Gördüğünüz gibi, 'content' veya 'source' ile ilgili HİÇBİR ayar yok.
• v4, projenizi otomatik olarak tarar.
• Yeni bir klasör (örn: /src/layouts) eklediğinizde
• hiçbir yapılandırma dosyasına dokunmanıza gerek kalmaz. */ @theme { --color-brand-primary: #FF00FF; --breakpoint-4xl: 2100px; }

/*

• 3. Gerekirse özel katmanlarınızı eklersiniz. */ @layer utilities { .my-utility { padding: 1rem; } }

```अब यह स्वचालित रूप से आपके प्रोजेक्ट को स्कैन करता है और आपकी टेम्पलेट फ़ाइलें ढूंढता है। इस प्रक्रिया में, यह प्रदर्शन को अनुकूलित करने के लिए आपकी .gitignore फ़ाइल में पथ और बायनेरिज़ को समझदारी से अनदेखा करता है।

मैनुअल स्रोत विशिष्टता

वाइट प्लगइन का उपयोग करते समय, यह प्रक्रिया और भी स्मार्ट हो जाती है: टेलविंड केवल आपके प्रोजेक्ट के मॉड्यूल ग्राफ़ में वास्तव में उपयोग की गई फ़ाइलों को स्कैन करके अधिकतम प्रदर्शन सुनिश्चित करता है। हालाँकि इसकी आवश्यकता शायद ही हो, आप इस स्वचालित पहचान को ओवरराइड करने के लिए @source निर्देश का उपयोग कर सकते हैं।```css @import "tailwindcss";

/**

• Otomatik taramanın bulamadığı,
• CMS'ten gelen sınıfları içeren dosyayı manuel olarak ekliyoruz.
• Glob desenleri (wildcards) kullanabiliriz. / @source "./src/cms-templates/**/.html";

@theme { /* ... tema ayarlarınız ... */ }

/* ... */

पिछले संस्करणों में, `group-has-*` जैसे भिन्न संयोजनों को फ्रेमवर्क के भीतर मैन्युअल रूप से एन्कोड किया गया था। यह सीमित लचीलापन है.

v4 कंपोज़ेबल वेरिएंट आर्किटेक्चर प्रदान करता है जो इस समस्या को पूरी तरह से समाप्त कर देता है। अब आप `group-*`, `has-*`, `peer-*` और `focus` जैसे वेरिएंट को स्वतंत्र रूप से संयोजित कर सकते हैं।

### उदाहरण उपयोग

उदाहरण के लिए, किसी समूह और उसके भीतर एक चाइल्ड तत्व पर मँडराते समय शैली लागू करना अब इतना सरल है:```html
<div class="group">
  <button class="group-hover:has-focus:opacity-100">
    Click me
  </button>
</div>
```इस आर्किटेक्चर को अन्य वेरिएंट के साथ भी जोड़ा जा सकता है, जैसे कि v4 के साथ आने वाला नया `not-*` वेरिएंट। अब `group-not-has-peer-not-data-active:underline` जैसे अत्यधिक विशिष्ट लेकिन पूरी तरह से मान्य चयनकर्ता बनाना संभव है।

## आधुनिक सीएसएस सुविधाओं का एकीकरण

v4 आधुनिक वेब प्लेटफॉर्म द्वारा पेश की गई नवीनतम सीएसएस सुविधाओं को मूल में शामिल करता है:

### स्थानीय चरण परतें (@परत)
v4 वास्तविक CSS `@layer` नियमों का उपयोग करके काम करता है। यह पुराने संस्करणों में आने वाली कई विशिष्ट समस्याओं का समाधान करता है।

### कंटेनर प्रश्न
`@tailwindcss/container-queries` प्लगइन की अब आवश्यकता नहीं है। `@container` वर्ग और `@lg:`, `@min-md:` जैसे वेरिएंट अब कर्नेल में शामिल हैं।

### आधुनिक रंग पैलेट (पी3)
अधिक जीवंत और समृद्ध रंग प्रदान करने के लिए ओकेएलसीएच रंग स्थान का उपयोग करके डिफ़ॉल्ट रंग पैलेट को आधुनिक बनाया गया है।

### उन्नत सीएसएस समर्थन
आधुनिक सीएसएस फ़ंक्शंस जैसे `@property` (ट्रांज़िशनिंग ग्रेडिएंट्स जैसे एनिमेशन की अनुमति देता है) और `color-mix()` (अपारदर्शिता संशोधक की सुविधा प्रदान करता है) अब पूरी तरह से समर्थित हैं।

## महत्वपूर्ण मौलिक परिवर्तन (ब्रेकिंग परिवर्तन)

v4 ने आधुनिक सीएसएस डिफ़ॉल्ट को बेहतर ढंग से समायोजित करने के लिए कुछ मुख्य सहायक वर्गों के व्यवहार को बदल दिया। स्विच करते समय आपको इन पर ध्यान देना होगा:

### सीमा वर्ग
पिछले संस्करणों में, `border` वर्ग ने डिफ़ॉल्ट रूप से ग्रे-200 रंग लागू किया था। v4 में इस व्यवहार को `currentColor` (वर्तमान टेक्स्ट रंग) में बदल दिया गया था, जो ब्राउज़र का मूल व्यवहार है। बॉर्डर अब टेक्स्ट का रंग प्राप्त कर लेंगे.

### रिंग क्लासइसी तरह, `ring` वर्ग अब डिफ़ॉल्ट रूप से 3px नीली रिंग नहीं बनाता है, बल्कि एक रिंग बनाता है जिसका आकार 1px है और `currentColor` का उपयोग करता है।

### स्वचालित अपग्रेड टूल

सौभाग्य से, टेलविंड टीम ने इस परिवर्तन को आसान बनाने के लिए एक स्वचालित अपग्रेड टूल भी जारी किया है:```bash
npx @tailwindcss/upgrade
```## v4.0 के बाद: v4.1 में नया क्या है

V4 की स्थिर रिलीज़ के बाद, विकास धीमा नहीं हुआ और v4.1 के साथ, निम्नलिखित लंबे समय से प्रतीक्षित सुविधाएँ जोड़ी गईं:

### नई सुविधाएँ

- **पाठ-छाया-***: पाठ में छाया जोड़ने के लिए उपयोगिता कक्षाएं
- **मास्क-***: छवियों और ग्रेडिएंट्स के साथ तत्वों को छिपाने के लिए नए एपीआई
- **prettier-plugin-tailwindcss अपडेट**: प्लगइन अब क्लास सूचियों में अनावश्यक स्थानों और डुप्लिकेट कक्षाओं को स्वचालित रूप से साफ़ करता है

## सर्वोत्तम प्रथाएँ

1. **सीएसएस-मूल दृष्टिकोण अपनाएं**: नई `@theme` संरचना का उपयोग करके सीएसएस में अपनी कॉन्फ़िगरेशन रखें
2. **स्वचालित स्कैनिंग पर भरोसा करें**: `@source` निर्देश का उपयोग केवल तभी करें जब वास्तव में आवश्यक हो
3. **आधुनिक सीएसएस सुविधाओं का लाभ उठाएं**: अपने प्रोजेक्ट में कंटेनर क्वेरी और नए रंग पैलेट का सक्रिय रूप से उपयोग करें
4. **वेरिएंट को स्वतंत्र रूप से संयोजित करें**: v4 के कंपोज़ेबल वेरिएंट आर्किटेक्चर द्वारा प्रदान किए गए लचीलेपन का लाभ उठाएं
5. **माइग्रेशन टूल का उपयोग करें**: माइग्रेशन के लिए स्वचालित टूल का लाभ उठाएं

## सामान्य गलतियाँ

- `tailwind.config.js` को हटाने से पहले सभी कॉन्फ़िगरेशन को CSS में नहीं ले जाया जा रहा है
- `@theme` ब्लॉक में पुराने नामकरण परंपराओं (`colors` के बजाय `--color-*`) का उपयोग करना भूल गए
- कक्षाओं `border` और `ring` के नए व्यवहार को अनदेखा करना
- यह भूल जाना कि स्वचालित सामग्री पहचान पहले से ही `node_modules` और अन्य अनावश्यक फ़ोल्डरों को अनदेखा कर देती है और मैन्युअल कॉन्फ़िगरेशन कर रही है

## उपकरण और संसाधन

- [टेलविंड सीएसएस v4 आधिकारिक दस्तावेज़ीकरण](https://tailwindcss.com/docs)
- [टेलविंड सीएसएस वी4 अपग्रेड गाइड](https://tailwindcss.com/docs/upgrade-guide)- [ऑक्साइड इंजन गिटहब रिपोजिटरी](https://github.com/tailwindlabs/tailwindcss)
- [टेलविंड प्ले](https://play.tailwindcss.com/) - ऑनलाइन खेल का मैदान
- [@tailwindcss/upgrade](https://www.npmjs.com/package/@tailwindcss/upgrade) - ऑटो अपग्रेड टूल

## भविष्य पर एक नज़र

टेलविंड सीएसएस v4 एक साधारण अपडेट से कहीं अधिक है, यह एक ऐसा कदम है जो फ्रेमवर्क के मूल दर्शन को फिर से परिभाषित करता है। नए ऑक्साइड इंजन के लिए धन्यवाद, यह न केवल तेज़ है; यह सरल, अधिक सहज और सीएसएस के प्राकृतिक प्रवाह के अनुरूप भी है।

`tailwind.config.js` का उन्मूलन, "शून्य कॉन्फ़िगरेशन" दृष्टिकोण और कंपोज़ेबल वेरिएंट जैसे नवाचार निर्विवाद रूप से डेवलपर अनुभव में सुधार करते हैं। टेलविंड की सीएसएस-केंद्रित क्रांति न केवल अपने भविष्य को मजबूत करती है, बल्कि पूरे फ्रंट-एंड पारिस्थितिकी तंत्र के लिए एक प्रश्न भी खड़ा करती है: भविष्य के उपकरण सीएसएस-विशिष्ट कैसे हो सकते हैं?