Tailwind CSS v4.0 की प्रगति को ओपन सोर्स के रूप में सार्वजनिक किया गया

• नया हाई-परफॉर्मेंस इंजन Oxide, Tailwind CSS v4.0 के रूप में विकसित किया जा रहा है.
• इसे developer experience को सरल बनाने और web platform के नवीनतम विकास का लाभ उठाने के लिए डिज़ाइन किया गया है.
• इसे मूल रूप से v3.x रिलीज़ के रूप में जारी किया जाना था, लेकिन नए पीढ़ी के framework के रूप में इसे v4.0 के रूप में जारी करने का निर्णय लिया गया.
• यह अभी शुरुआती चरण में है और बहुत काम बाकी है, लेकिन पहला सार्वजनिक alpha version टैग कर दिया गया है ताकि प्रयोग शुरू किया जा सके.

नया इंजन, गति के लिए बनाया गया

• नए इंजन को शुरू से दोबारा लिखा गया है, और यह कम code के साथ अधिक तेज़ी देता है.
• यह अधिकतम 10 गुना तेज़ build speed देता है; Tailwind CSS वेबसाइट 105ms में और Catalyst UI kit 55ms में build हो सकती है.
• नए इंजन का install size 35% से अधिक कम हो गया है, हालांकि इसमें Rust और Lightning CSS जैसे भारी native packages शामिल हैं.
• framework के सबसे महंगे हिस्सों को संभालने के लिए Rust का उपयोग किया गया है, जबकि extensibility देने के लिए core को TypeScript में रखा गया है.
• नया इंजन केवल Lightning CSS पर निर्भर करता है.
• इसने अपना CSS parser लिखा है और ऐसी data structures डिज़ाइन की हैं जो PostCSS की तुलना में 2 गुना तेज़ parsing speed देती हैं.

एकीकृत toolchain

• Tailwind CSS v4 अब सिर्फ़ plugin नहीं है, बल्कि CSS को प्रोसेस करने वाला all-in-one tool है.
• @import प्रोसेसिंग, vendor prefixing, nesting support आदि built-in हैं, इसलिए अलग configuration की ज़रूरत नहीं है.
• यह oklch() colors और media query ranges जैसी आधुनिक CSS सुविधाओं को बेहतर browser support के लिए उपयुक्त syntax में बदलता है.
• PostCSS plugin मिलता रहेगा, लेकिन bundler plugins की भी खोज की जा रही है, और पहले alpha release के साथ आधिकारिक Vite plugin दिया जा रहा है.

आधुनिक web के लिए डिज़ाइन किया गया

• Tailwind CSS v4 का लक्ष्य ऐसा framework बनाना है जो आने वाले कई वर्षों तक cutting-edge महसूस हो.
• यह वास्तविक @layer rules का उपयोग करके उन specificity समस्याओं को हल करता है जो पहले समस्या रही हैं.
• यह @property का उपयोग करके internal custom properties को स्पष्ट रूप से परिभाषित करता है और background gradient जैसे effects संभव बनाता है.
• यह color-mix का उपयोग करके color variables की opacity बदलना या currentColor की opacity समायोजित करना आसान बनाता है.
• यह core में सीधे container queries को support करता है, और नए @min-* तथा @max-* variants के ज़रिए container query ranges को support करता है.

संयोज्य variants

• नई architecture अब ऐसे variants को साथ में compose करने देती है जो अलग-अलग selectors पर काम करते हैं.
• पहले के versions में group-has-* जैसे variants को framework में स्पष्ट रूप से परिभाषित करना पड़ता था, लेकिन अब group-* को मौजूदा has-* variants के साथ compose किया जा सकता है.

zero-configuration content detection

• शुरुआती alpha release में content paths configure नहीं किए जा सकते, और अधिकांश projects में इन्हें फिर से सेट करने की ज़रूरत भी नहीं होगी.
• यदि आप PostCSS plugin या CLI का उपयोग करते हैं, तो Tailwind template files खोजने के लिए पूरे project को crawl करेगा.
• यदि आप Vite plugin का उपयोग करते हैं, तो यह module graph पर निर्भर करेगा ताकि ठीक-ठीक पता चल सके कि वास्तव में कौन-सी files उपयोग हो रही हैं.

CSS-first configuration

• Tailwind CSS v4.0 का एक प्रमुख लक्ष्य framework को CSS-native जैसा महसूस कराना है, न कि JavaScript library जैसा.
• install करने के बाद इसे सामान्य CSS @import statement का उपयोग करके project में जोड़ा जाता है.
• JavaScript configuration file में सारी customization सेट करने के बजाय, यह CSS variables का उपयोग करता है.

क्या बदला है

• महत्वपूर्ण changes को हल्के में नहीं लिया गया है, लेकिन v4 में कुछ चीज़ें अलग तरह से संभाली गई हैं.
• undocumented utilities अब हटा दी गई हैं.
• PostCSS plugin और CLI अलग packages के रूप में दिए जाते हैं.
• default border color हटा दिया गया है.
• डिफ़ॉल्ट रूप से ring utility अब currentColor का उपयोग करने वाली 1px ring है.

v4.0 तक का roadmap

• नया इंजन शुरू से दोबारा लिखा गया है और developer experience पर पूरी तरह केंद्रित है, जिसमें नया configuration approach इस्तेमाल होता है.
• backward compatibility को बहुत महत्वपूर्ण माना गया है, और यह stable v4.0 release के लिए एक बड़ा काम है.
• इसमें JavaScript configuration file support, explicit content path configuration, दूसरे dark mode support, plugin और custom utility support, class prefix configuration, safelists और blocklists support, important configuration support, theme() function support, standalone CLI support आदि शामिल हैं.

alpha version आज़माएँ

• कुछ alpha releases पहले ही टैग की जा चुकी हैं, और आप आज से अपने project में प्रयोग शुरू कर सकते हैं.
• यदि आप Tailwind CSS IntelliSense extension का उपयोग करते हैं, तो आपको VS Code extension page पर pre-release version पर स्विच करना होगा.
• अगर कोई समस्या मिले, तो GitHub पर बताने का अनुरोध है.

Vite का उपयोग

• Tailwind CSS v4 alpha और नया Vite plugin install करें.
• vite.config.ts file में plugin जोड़ें.
• main CSS file में Tailwind import करें.

PostCSS का उपयोग

• Tailwind CSS v4 alpha और अलग PostCSS plugin package install करें.
• postcss.config.js file में plugin जोड़ें.
• main CSS file में Tailwind import करें.

CLI का उपयोग

• Tailwind CSS v4 alpha और अलग CLI package install करें.
• main CSS file में Tailwind import करें.
• CLI tool का उपयोग करके CSS compile करें.

GN⁺ की राय

• Tailwind CSS v4.0 को ओपन सोर्स के रूप में सार्वजनिक करने से developer community को नई सुविधाओं और improvements का पहले से अनुभव करने का मौका मिलता है. इसका मतलब है कि developers framework पर feedback दे सकते हैं और अधिक स्थिर final release में योगदान कर सकते हैं.
• नए इंजन का performance improvement build time को काफ़ी कम करता दिखता है, इसलिए यह विशेष रूप से बड़े projects या उन environments में उपयोगी हो सकता है जहाँ तेज़ development cycles महत्वपूर्ण हैं.
• Rust और TypeScript का संयोजन performance और extensibility दोनों को साथ लेकर चलने वाले आधुनिक approach को दिखाता है. Rust में लिखे गए हिस्से performance को अधिकतम करते हैं, जबकि TypeScript developers के लिए इसे आसानी से extend और maintain करना संभव बनाता है.
• CSS variables का उपयोग करने वाला नया configuration approach, मौजूदा JavaScript-आधारित setup की तुलना में अधिक CSS-friendly है और design systems के साथ integration को आसान बना सकता है.
• ये बदलाव मौजूदा users के लिए कुछ migration work की मांग कर सकते हैं, लेकिन लंबे समय में यह अधिक संक्षिप्त और maintainable codebase की ओर ले जा सकते हैं.

[GN⁺]

Hacker News राय

• फ्रंटएंड के लिए Tailwind CSS दूसरी सबसे अच्छी चीज़ है, और केवल Vue 3 ही इसे पीछे छोड़ता है.

  • CSS class names रखने की मेहनत नहीं करनी पड़ती, और न ही duplicate CSS code या conflicting classes की समस्या होती है.
  • सारा code एक ही file में होता है, इसलिए component को सिर्फ code देखकर visualize किया जा सकता है.
  • मैं SCSS पर वापस नहीं जाऊँगा, और मुझे लगता है कि Vue 3, TailwindCSS, Vite का combination सबसे बेहतरीन है.

• Tailwind का कड़ा आलोचक होने के नाते, CSS-first configuration के तहत की गई सारी घोषणाएँ बहुत स्वागतयोग्य हैं.

  • Tailwind के design tokens, reset आदि का उपयोग किया जा सकता है, और actual CSS के जरिए customization भी संभव है.
  • CSS की modern architecture, cascade, यहाँ तक कि web components के shadow DOM को छोड़े बिना Tailwind को "हल्के" तरीके से इस्तेमाल करने का नया रास्ता दिखाया गया है.

• CTRL+u syntax का एक अच्छा उदाहरण दिखाता है.

  • उदाहरण के लिए, rounded corners वाले box और ऊपर-नीचे sections बनाने के लिए एक intuitive one-liner code की ज़रूरत होती है.

• standalone CLI पर अभी तक काम नहीं किया गया है, लेकिन v4.0 release से पहले इसे ज़रूर पूरा किया जाएगा.

  • release announcement के बाकी हिस्सों को देखते हुए, मेरा अनुमान है कि यह Rust में बनाया जाएगा.
  • मैं इसे Node embed किए बिना पसंद करूँगा, खासकर अगर वह Vercel के अब छोड़ दिए गए pkg tool पर निर्भर करता हो.

• इसमें कई promising improvements हैं.

  • JS के जरिए extend करने के बजाय CSS के जरिए themes control करने की क्षमता को लेकर मैं सबसे ज़्यादा उत्साहित हूँ.

• उम्मीद है Tailwind, unocss की तरह attributify को support करेगा.

  • complex layouts के लिए यह काफी ज़्यादा readable होता है.

• मैं frontend developer नहीं हूँ, लेकिन कुछ websites maintain करता हूँ, और वे सभी Tailwind का इस्तेमाल करती हैं.

  • Tailwind maintainers के पास priorities तय करने की बहुत अच्छी समझ है, और उनका design sense भी शानदार है.
  • Tailwind को तब तक समझना मुश्किल है जब तक आप इसे इस्तेमाल न करें, लेकिन हर version के साथ यह और अधिक refined product देता है.
  • इस version में compatibility के लिहाज़ से बहुत कुछ बदला नहीं है, लेकिन जब version 4 औपचारिक रूप से आएगा तो और बदलाव हो सकते हैं.
  • नए engine का outlook बहुत शानदार है, और build speed में सुधार हमेशा स्वागतयोग्य है.

• सोच रहा हूँ कि Tailwind पर कोई अच्छा tutorial/guide है या नहीं.

• सोच रहा हूँ कि क्या कोई htmx या किसी दूसरे hateoas approach के साथ tailwindcss का इस्तेमाल कर रहा है.

  • hypertext का styling से संबंध नहीं होना चाहिए, लेकिन Tailwind जैसी चीज़ इसके साथ टकरा सकती है.
  • CSS और hateoas तो markup और styling को अलग रखने की वजह से बहुत अच्छी तरह साथ चलते हैं, लेकिन tailwindcss जैसी चीज़ों के मामले में लोग इसे कैसे करते हैं, यह जानना चाहता हूँ.

• मैं इसे demo project में इस्तेमाल करना चाहता था, लेकिन import from "node:@tailwindcss/postcss@latest" से package.json के exports field से संबंधित error आता है.

  • फिर भी, blog post में कहा गया है कि postcss-import का इस्तेमाल करने की ज़रूरत नहीं है, लेकिन इसे dependency के रूप में अब भी शामिल किया गया है.