Tailwind CSS v4 माइग्रेशन गाइड — Oxide इंजन, CSS वेरिएबल्स और ब्रेकिंग चेंजेज़

Tailwind CSS v4 — क्या बदला है?

Tailwind CSS v4 एक महत्वपूर्ण अपग्रेड है जो नए Oxide बिल्ड इंजन, CSS-नेटिव कॉन्फ़िगरेशन और थीमिंग में बड़े बदलाव लाता है। यदि आप v3 से अपग्रेड कर रहे हैं, तो ये बदलाव समझना आवश्यक है।

v3 बनाम v4 — प्रमुख अंतर

Oxide इंजन: 5 गुना तेज़ बिल्ड

Tailwind CSS v4 का Oxide इंजन Rust में पूरी तरह से पुनर्लिखित है। परिणाम:

• फुल बिल्ड: 3.5 गुना तेज़
• इन्क्रीमेंटल बिल्ड: 8 गुना तेज़
• वास्तविक बड़े प्रोजेक्ट: औसतन 5 गुना तेज़

यह बड़े प्रोजेक्ट में विशेष रूप से महत्वपूर्ण है जहाँ v3 बिल्ड कई सेकंड लेता था।

CSS-नेटिव कॉन्फ़िगरेशन

v3 का तरीका (tailwind.config.js)

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

v4 का तरीका (@theme डायरेक्टिव)

/* globals.css (v4) */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-sans: 'Inter', sans-serif;
}

v4 में सभी थीम वेरिएबल्स CSS कस्टम प्रॉपर्टीज़ (CSS वेरिएबल्स) के रूप में परिभाषित होते हैं। इसका मतलब है:

• JavaScript लोड किए बिना CSS में सीधे var(--color-primary) उपयोग करें
• ब्राउज़र DevTools में थीम वेरिएबल्स देखें
• JavaScript से रनटाइम पर थीम बदलें

ब्रेकिंग चेंजेज़

1. कॉन्फ़िगरेशन फ़ाइल

tailwind.config.js अब डिफ़ॉल्ट रूप से समर्थित नहीं है। CSS @theme डायरेक्टिव का उपयोग करें। माइग्रेशन के लिए @tailwindcss/upgrade CLI टूल उपलब्ध है:

npx @tailwindcss/upgrade

2. Dark Mode

/* v3 */
/* tailwind.config.js: darkMode: 'class' */
.dark .text-white { color: white; }

/* v4 */
@variant dark (&:where(.dark, .dark *)) {
  .text-white { color: white; }
}

3. Content स्कैनिंग स्वचालित

v3 में content ऐरे मैन्युअल रूप से परिभाषित करना पड़ता था:

content: ['./src/**/*.{js,ts,jsx,tsx}'],

v4 में Oxide इंजन स्वचालित रूप से प्रोजेक्ट फ़ाइलें स्कैन करता है — content कॉन्फ़िगरेशन की आवश्यकता नहीं।

4. CSS इम्पोर्ट सिंटैक्स

/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 */
@import "tailwindcss";

5. PostCSS कॉन्फ़िगरेशन

v4 में PostCSS वैकल्पिक है। Vite उपयोगकर्ताओं के लिए नया Vite प्लगइन:

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

v3 से v4 में माइग्रेशन चरण

1. 1अपग्रेड टूल चलाएं:

``bash npx @tailwindcss/upgrade ``

1. 1कॉन्फ़िगरेशन माइग्रेट करें: tailwind.config.js → @theme डायरेक्टिव

1. 1CSS इम्पोर्ट अपडेट करें: @tailwind base/components/utilities → @import "tailwindcss"

1. 1Dark Mode अपडेट करें: v4 सिंटैक्स में बदलें

1. 1बिल्ड टेस्ट करें: ब्रेकिंग चेंजेज़ की जाँच करें

व्यावहारिक अंतर्दृष्टि

CSS वेरिएबल्स-आधारित थीमिंग v4 का सबसे बड़ा फायदा है। पहले JavaScript में थीम परिभाषित होती थी — अब CSS में सीधे। इससे:

• रनटाइम थीम स्विचिंग (डार्क/लाइट मोड) बिना JavaScript के
• CSS :root वेरिएबल्स से सीधे एकीकरण
• TypeScript में var(--color-primary) का उपयोग

5 गुना तेज़ बिल्ड गति बड़े प्रोजेक्ट में डेवलपमेंट अनुभव को काफी बेहतर बनाती है — विशेष रूप से 500+ कॉम्पोनेंट वाले प्रोजेक्ट में।

निष्कर्ष

Tailwind CSS v4 Oxide इंजन, CSS-नेटिव कॉन्फ़िगरेशन और स्वचालित content स्कैनिंग के साथ एक महत्वपूर्ण अपग्रेड है। माइग्रेशन के लिए @tailwindcss/upgrade CLI टूल उपलब्ध है जो अधिकतर बदलाव स्वचालित रूप से करता है।

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

प्रश्न 1. क्या v3 प्रोजेक्ट को v4 में अपग्रेड करना सुरक्षित है? उत्तर: हाँ, npx @tailwindcss/upgrade टूल अधिकतर माइग्रेशन स्वचालित करता है। हालाँकि, ब्रेकिंग चेंजेज़ की सूची की जाँच करें और स्टेजिंग पर पहले परीक्षण करें।

प्रश्न 2. क्या tailwind.config.js अभी भी v4 में काम करता है? उत्तर: आंशिक रूप से, लेकिन यह डिप्रेकेटेड है। v4 में CSS @theme डायरेक्टिव का उपयोग अनुशंसित है।

प्रश्न 3. Oxide इंजन की बिल्ड गति कितनी बेहतर है? उत्तर: फुल बिल्ड 3.5 गुना, इन्क्रीमेंटल बिल्ड 8 गुना तेज़। बड़े प्रोजेक्ट में औसतन 5 गुना सुधार।

प्रश्न 4. क्या PostCSS अब आवश्यक नहीं है? उत्तर: v4 में PostCSS वैकल्पिक है। Vite उपयोगकर्ता @tailwindcss/vite प्लगइन सीधे उपयोग कर सकते हैं।

प्रश्न 5. CSS वेरिएबल्स-आधारित थीमिंग का क्या फायदा है? उत्तर: JavaScript लोड किए बिना CSS में थीम वेरिएबल्स उपयोग करें, ब्राउज़र DevTools में देखें, और रनटाइम पर JavaScript से थीम बदलें।

प्रश्न 6. Next.js 15 के साथ Tailwind v4 कैसे सेटअप करें? उत्तर: npm install tailwindcss@next @tailwindcss/postcss चलाएं, postcss.config.js में @tailwindcss/postcss जोड़ें, और globals.css में @import "tailwindcss" लिखें।