हर कोई Tailwind CSS v4 के बारे में क्यों लड़ रहा है, इसका असली कारण

Tailwind CSS v4 की बहस हर जगह है। ज़्यादातर लोग गलत चीज़ पर बहस कर रहे हैं।

असली सवाल utility classes बनाम inline styles के बारे में नहीं है। सवाल यह है कि आपकी styling कहाँ रहती है और उसका मानसिक बोझ (mental cost) किसे उठाना पड़ता है।

Tailwind v4 configuration को आपकी CSS फ़ाइल में ले आता है। आप JavaScript config फ़ाइल के बजाय @theme का उपयोग करते हैं। इससे workflows अधिक साफ-सुथरे हो जाते हैं।

लेकिन विवाद का कारण यह नहीं है। विवाद इस बात से पैदा होता है कि v4 कैसे दो अलग-अलग patterns को इस्तेमाल करना आसान बना देता है।

Pattern 1: आपके components में utility classes. आप सीधे अपने HTML या JSX में classes लिखते हैं। यह आपको सटीक रूप से बताता है कि एक element कैसा दिखता है।

Pattern 2: @apply approach. आप एक CSS फ़ाइल में .alert या .alert--error जैसी semantic classes बनाते हैं। यह आपको बताता है कि एक element क्या है।

दोनों तरीके काम करते हैं। कोई भी गलत नहीं है। वे अलग-अलग दर्शन (philosophies) का पालन करते हैं।

Group A co-location में विश्वास रखता है। सब कुछ एक ही जगह रहता है। Group B semantic names में विश्वास रखता है। वे ऐसे नाम चाहते हैं जो उद्देश्य (purpose) का वर्णन करें।

जब एक designer error color को लाल से बदलकर नारंगी कर देता है, तो Group A कोड फ़ाइलों में खोजता है। Group B एक CSS फ़ाइल में एक लाइन बदल देता है।

Tailwind v4 @apply को अधिक स्वाभाविक (natural) बना देता है। इससे तनाव और बढ़ जाता है।

अपनी टीम के आकार के आधार पर चुनने का तरीका यहाँ दिया गया है:

  • छोटी टीमें (Small teams): utility classes का उपयोग करें। आपको classes को नाम देने में समय बिताने की आवश्यकता नहीं है। जब हर कोई एक ही फ़ाइलों पर काम करता है, तो आप तेज़ी से आगे बढ़ते हैं।

  • Component libraries: @apply या CSS variables का उपयोग करें। आपके उपयोगकर्ताओं को आपके internal design tokens को जानने की आवश्यकता नहीं होनी चाहिए।

  • बड़ी कंपनियाँ (Large companies): एक hybrid model का उपयोग करें। design system टीम को semantic classes का स्वामित्व दें। application developers को त्वरित layouts के लिए utilities का उपयोग करने दें।

लंबी class strings को पढ़ने से बचने के लिए केवल @apply का उपयोग न करें। यह कोई रणनीति नहीं है। यह केवल बचाव (avoidance) है।

सबसे मुखर आलोचक अक्सर framework के बजाय अपने tools से लड़ते हैं। यदि आपके editor में IntelliSense की कमी है या आपकी टीम में design token system नहीं है, तो workflow टूटा हुआ महसूस होगा।

framework को दोष देने से पहले अपने workflow को ठीक करें।

Tailwind v4 एक दमदार release है। CSS-first config बेहतर है। यह बहस केवल इस बात का संकेत है कि टीमों को स्पष्ट निर्णय लेने की आवश्यकता है।

एक चुनाव करें। उसे document करें। आगे बढ़ें।

आपकी टीम का दृष्टिकोण क्या है? क्या आप utility classes का उपयोग करते हैं या @apply का?

Source: https://dev.to/enjoy_kumawat/the-real-reason-everyones-fighting-about-tailwind-css-v4-4o0g