Tailwind Plus में Vanilla JavaScript सपोर्ट जोड़ा गया
(tailwindcss.com)- Tailwind Plus के UI blocks अब केवल Vanilla JavaScript के साथ पूरी तरह काम कर सकते हैं
- React, Vue जैसे frameworks के बिना भी interactive components इस्तेमाल किए जा सकते हैं
- @tailwindplus/elements नाम की नई custom element-आधारित library उपलब्ध कराई गई है
- विभिन्न platforms और frameworks के साथ compatibility पर ज़ोर दिया गया है
- सभी Tailwind Plus customers अभी से इस फ़ीचर का इस्तेमाल कर सकते हैं
Tailwind Plus में Vanilla JavaScript सपोर्ट की शुरुआत
Tailwind Plus के कई UI blocks, जैसे dialogs, dropdowns, command palettes, वास्तव में उपयोगी बनने के लिए JavaScript की ज़रूरत रखते थे। पहले, अगर आप React या Vue इस्तेमाल नहीं कर रहे थे, तो इन UI blocks के interaction के लिए JavaScript खुद लिखनी पड़ती थी।
लेकिन अब सभी UI blocks पूरी functionality, accessibility और interactive elements के साथ Plain HTML examples में भी तुरंत काम करते हैं। यानी JavaScript framework पर निर्भर हुए बिना dropdowns, command palettes, dialogs, drawers जैसे कई interface blocks को किसी भी project में इस्तेमाल किया जा सकता है।
@tailwindplus/elements: मुख्य library
इस बदलाव को संभव बनाने वाली library है @tailwindplus/elements। यह Tailwind Plus customers के लिए एक dedicated package है, जो headless custom elements का संग्रह है।
- Custom elements को HTML code में सिर्फ एक
<script>tag जोड़कर कहीं भी इस्तेमाल किया जा सकता है - जटिल interactions, focus management, keyboard accessibility, ARIA attributes आदि अपने-आप संभाले जाते हैं
- Styling को Tailwind CSS utility classes या अपनी लिखी CSS के साथ आसानी से customize किया जा सकता है
मुख्य उपयोग उदाहरण
- Dropdown:
<el-dropdown>,<el-menu>जैसे custom elements से बनाया जा सकता है और अलग JavaScript के बिना काम करता है - Select:
<el-select>,<el-options>,<el-option>elements के साथ advanced selection component बनाया जा सकता है - Command palette:
<el-command-palette>,<el-command-list>जैसी संरचना से पूरी functionality मिलती है
ये custom elements ARIA attributes, focus movement और keyboard navigation को अपने-आप संभालते हैं, जिससे web accessibility को भी मज़बूत समर्थन मिलता है।
Framework integration और कम platform dependency
- सिर्फ HTML वाले environment के अलावा Svelte, Rails(Ruby on Rails), React जैसे कई environment में integration संभव है
- Svelte उदाहरण:
<el-autocomplete>में two-way binding जोड़ने का उदाहरण दिया गया है - Rails उदाहरण: form submit होने पर
<el-select>का value native form control की तरह server तक भेजा जाता है - React उदाहरण: Headless UI या React Aria के विपरीत इसे framework dependency के बिना इस्तेमाल किया जा सकता है
आधुनिक web standards और browser compatibility
- Elements, Web Components और Custom Elements जैसे modern web platform features का सक्रिय उपयोग करके हल्का setup और native अनुभव देते हैं
- ज़रूरत होने पर polyfill भी अपने-आप bundle किया जाता है, जिससे Tailwind CSS v4 के बराबर browser support मिलता है
- जैसे-जैसे web standards और व्यापक होंगे, Elements का आकार भी स्वाभाविक रूप से हल्का होता जाएगा
असली सार्वभौमिकता: "HTML ही सबसे छोटा साझा आधार"
HTML सभी web frameworks का "सबसे छोटा साझा आधार" है, और Elements की मदद से Tailwind Plus के HTML-आधारित UI blocks किसी भी environment में लगातार एक जैसा काम करते हैं।
- Svelte, Rails, React आदि में वास्तविक उपयोग उदाहरण और code उपलब्ध हैं
रिलीज़ और एक्सेस जानकारी
- Tailwind Plus subscribers तुरंत सभी updated UI blocks और Elements का इस्तेमाल कर सकते हैं
- dropdowns, command palettes जैसी कई UI categories के demo examples और Elements की आधिकारिक documentation उपलब्ध हैं
- Project की ज़रूरत के अनुसार अपनी पसंद के तरीके से customize किया जा सकता है
समापन
अब Tailwind Plus users किसी भी environment में, जटिल JavaScript लिखे बिना, शक्तिशाली और accessible UI आसानी से बना सकते हैं।
1 टिप्पणियां
Hacker News राय
`` जैसे लंबे और पदानुक्रमित Tailwind class naming को देखकर ऐसा लगता है कि अब केवल CSS ही नहीं, बल्कि एक और hierarchical system भी सीखना पड़ता है
जब भी कोई बड़ा Tailwind project खोलता हूँ, तो एक ही लाइन में बहुत लंबी class attribute list देखकर हमेशा हैरानी होती है
Tailwind से पहले, जिन भी web designers से सामना होता था, वे इस तरह का system अपने-अपने तरीके से बनाया करते थे CSS सैद्धांतिक रूप से काफ़ी powerful है और Tailwind के बिना भी पूरी तरह काम किया जा सकता है लेकिन व्यवहार में CSS की एक बड़ी कमी है: इसकी पूरी ताकत का इस्तेमाल करने के लिए semantic model अलग से डिज़ाइन करना पड़ता है, जबकि designers अक्सर document structure या information architecture से ज़्यादा mood और emotional output पर ध्यान देते हैं ऐसे भावनात्मक concepts को logical rules में markup करना बहुत मुश्किल, बल्कि कभी-कभी असंभव होता है Tailwind ने बस वही चीज़ औपचारिक बना दी जो सब पहले से कर रहे थे, यानी “meaning” की abstract modeling के बजाय सीधे लागू होने वाले rules जैसे
bold,redऐसा code देखकर ‘वाह, यह तो सचमुच साफ़-सुथरा code है!’ कहने वाले लोग कैसे बनते हैं, यह सोचकर हैरानी होती है समझ नहीं आता Tailwind इतना लोकप्रिय कैसे हो गया, और मुझे लगता है कि pure CSS सीखना सच में बेहतर है आजकल CSS वाकई बहुत बेहतर हो गया है
असली projects में classes को पढ़ने में आसान बनाने के लिए group करके लिखा जाता है उदाहरण के लिए,
इस तरह coding की जाती है अभी तो manually classify करता हूँ, लेकिन अच्छा होता अगर इस format को automate करने वाला कोई tool होता
लगता है Tailwind की शुरुआत utility class style CSS framework, यानी “Bourbon on Steroids” जैसे concept से हुई थी लेकिन लोगों ने example code को उम्मीद से कहीं ज़्यादा आसानी से अपना लिया, और उसे वैसे ही जोड़ते चले गए 2018 में एक नए बड़े project पर Tailwind लगाया था, और पहले
.button,.button-primaryजैसी classes में Tailwind utilities को compose करने से maintenance आसान रहती थी और HTML भी साफ़ दिखता था लेकिन टीम ने जब खुद इस्तेमाल किया तो पाया कि built-in utility classes को सीधे compose करना कहीं ज़्यादा तेज़ और आसान था अगर code elegance की परवाह न करें तो design भी consistent रहता था और Photoshop में जैसा दिखता था वैसा ही implement हो जाता था Bourbon संदर्भयह web standards आधारित Web Components का इस्तेमाल करने वाला तरीका है browser में built-in support होने की वजह से यह JS framework के बिना भी काम करता है developers को Web Components का ज़्यादा इस्तेमाल करते देखना अच्छा लगता है Web Components क्या हैं? (MDN)
यह बहुत लंबे समय से इंतज़ार किया गया बदलाव है पहले compatibility की चिंता न होने पर personal projects में Web Components से खेलता था, और अब mainstream libraries में इन्हें अपनाते देखना सच में अच्छा लग रहा है
12 साल से Web Components की ज़रूरत की बात करता आया हूँ, लेकिन React, Angular, Svelte जैसे framework camp में प्रतिक्रिया ठंडी रही Web Components, scoped JS/TS और एक bundler (जैसे vite या rollup) काफ़ी हैं, Shadow DOM या full rerendering जैसे बेकार overhead की ज़रूरत नहीं है
2014 के आसपास जब Polymer के साथ खेला था, तब “transclusion” शब्द काफ़ी प्रभावशाली लगा था उस समय कुछ नया-सा लगा था, लेकिन अब उसका मतलब भी ठीक से याद नहीं
कंपनी के ad code hooks में Web Components लागू करके देखा था, लेकिन व्यक्तिगत रूप से थोड़ा निराशाजनक लगा code execution trigger करना आसान है, लेकिन API खुद उतनी अच्छी नहीं है
popular UI component की दुनिया को देखकर हमेशा यह सवाल रहा कि base सबका ‘headless’ क्यों नहीं था Web Components तो काफ़ी पहले से थे, फिर भी इस तरह का approach आम क्यों नहीं हुआ, यह अजीब लगता था framework-specific libraries (जैसे SHADCN आदि) version compatibility के हिसाब से अलग-अलग documentation बनाती हैं, किसी खास environment से बंधी रहती हैं, और व्यवहार में अक्सर अधूरी लगती हैं Headless UI को base बनाकर, ज़रूरत पड़े तो framework-specific wrappers बनाना शायद बेहतर तरीका होता बेशक हालात इससे ज़्यादा जटिल हैं, लेकिन ऐसी दुनिया की कल्पना अच्छी लगती है
कभी-कभी कल्पना करता हूँ कि अगर कोई Tailwind team को पर्याप्त funding दे दे, तो शायद बिना पैसों की चिंता के पूरा Tailwind ecosystem मुफ़्त मिल सके और दुनिया थोड़ी बेहतर हो जाए Tailwind Plus जैसी चीज़ों में अलग-अलग जगहों के साथ deep integration के इतने मौके छूटते देखना अफ़सोसजनक है इससे 37signals का वह पुराना मामला याद आता है जब Jeff Bezos के निवेश के बाद उन्हें VC की चिंता से आज़ादी मिली थी
Tailwind team पहले से ही कल्पना से ज़्यादा सफल है और ज़्यादा बनाना और विस्तार करना पैसे की मजबूरी से नहीं, बल्कि स्वाभाविक ambition से आता है मेरी impression यह है कि Tailwind (open source) पूरे business का सिर्फ एक हिस्सा है, और वे revenue-generating दूसरे projects भी बनाना चाहते हैं इसकी तुलना Laravel से भी की जा सकती है
सच कहूँ तो आजकल AI से Tailwind components आसानी से generate हो जाते हैं, इसलिए Tailwind Plus जैसे paid components ख़रीदने की इच्छा पहले से कम हो गई है पुराने Tailwind UI दौर में मैंने वाकई पैसे देकर खरीदा था, लेकिन अब तो Claude जैसे AI से सीधे UI बनवा लेना ज़्यादा आसान लगता है, और license की चिंता भी नहीं रहती आगे कौन-सा business model चलेगा, यह देखना दिलचस्प होगा
37signals के मामले में, व्यक्तिगत रूप से कभी-कभी लगता है कि अगर founder किसी को जवाबदेह रहते हुए काम करते, तो शायद वह उनके लिए बेहतर होता
सच तो यह है कि “Tailwind का पूरा अनुभव” पहले से ही मुफ़्त उपलब्ध है कौन-सी deep integration की कमी है, यह समझ नहीं आता Tailwind Plus (commercial product) बस off-the-shelf ready-made templates और prebuilt components का collection है जल्दी शुरू करना चाहने वाले developers के लिए यह सुविधाजनक है, लेकिन आखिरकार Tailwind भर से सब कुछ खुद बनाया जा सकता है
ठीक-ठीक किस integration की बात हो रही है, यह जानने की उत्सुकता है
अभी ज़्यादा उत्साहित न होना ही बेहतर है पहले Vue support भी था, लेकिन अब लगता है कि उसे लगभग छोड़ दिया गया है
यही तो Vue support है frameworks इतने ज़्यादा हैं कि हर एक के लिए custom wrapper बनाना लगभग असंभव है Web Components का इस्तेमाल किया जाए तो एक बार बनाकर हर environment में चलाया जा सकता है, और अंततः बस इतना काफ़ी है कि frameworks Web Components support करें, यानी लगभग HTML support करें
Vue का Web Components support बहुत अच्छा है, और React 19 ने भी आखिरकार इसे ठीक से support करना शुरू किया है Web Components ecosystem अव्यवस्थित है, यह सही है, लेकिन इस तरह “हर framework में फिर से इस्तेमाल हो सकने वाले components” देना ही Web Components का असली killer app है इसे “vanilla JavaScript के लिए” कहने के बजाय “अब सभी frameworks supported” कहकर promote न करना हैरान करता है
वे Figma design library भी चलाते थे, लेकिन अब वह नहीं है designers के साथ collaboration के लिहाज़ से यह काफ़ी अफ़सोस की बात है
नाम ही बताता है कि इसका लक्ष्य tailwindcss है
custom elements के इस तरह के इस्तेमाल का उदाहरण दिलचस्प लगा, लेकिन Tailwind में यह paid feature है, यह थोड़ा अजीब है सहज रूप से तो ऐसा लगता है कि custom elements मुफ़्त हों और framework integration paid हो, तो ज़्यादा स्वाभाविक लगेगा Tailwind Plus pricing policy
इस library को बनाने में लगभग $250,000 लगे, इसलिए यह paid है इसे बस मुफ़्त देकर maintain करना संभव नहीं होता, और skilled engineers को उचित compensation मिलना चाहिए
Tailwind Plus UI components और templates का paid collection है TailwindCSS का core तो Bootstrap की तरह सिर्फ styling tool है
एक और मशहूर paid feature SSO जैसा भी है क्यों paid है, यह सहज रूप से समझ नहीं आता, लेकिन यह शायद adoption decision को जानबूझकर टालने की रणनीति है
ऐसी चीज़ को paid बेचने का विचार थोड़ा अजीब लगता है web development की उस दुनिया में जहाँ default मुफ़्त होता है, अगर framework को life-long इस्तेमाल करने के लिए subscription fee देनी पड़े तो वह अटपटा लग सकता है कुछ वैसा जैसे Postgres मासिक शुल्क माँगे हालाँकि pricing policy देखने पर यह lifetime one-time purchase जैसा है यह मॉडल कितना काम करेगा, यह देखना दिलचस्प होगा
लगता है Alpine.js, tailwindcss plus के custom block elements से गायब हो गया है code examples में अब alpinejs नहीं दिखता, यह देखकर निराशा हुई अब उसकी जगह
इस तरह इस्तेमाल हो रहा है Alpine इस्तेमाल करने वालों के नज़रिए से copy-paste examples अब सीधे काम न आना अफ़सोसजनक है
अच्छा होता अगर यह feature tailwind के free users के लिए भी खुला होता यह बहुत दिलचस्प है और मैं इसे एक बार आज़माना चाहता हूँ, लेकिन मुफ़्त में इसे छूकर देखना भी संभव नहीं है, यह निराशाजनक है फिर भी open source के लिए funding हमेशा आसान नहीं होती, यह जानता हूँ, इसलिए tailwind के लिए आभार है उम्मीद है कि कभी open source में donation भी करूँगा और contribution देने वाला व्यक्ति भी बनूँगा
कहा गया है कि `` जैसे Elements में advanced command palette जैसी चीज़ें बनाई जा सकती हैं, लेकिन असल में वह संभव इसलिए हुआ क्योंकि वह feature उसी component में सीधे जोड़ा गया था
हाल में Tailwind का ज़्यादा इस्तेमाल करते हुए यह मानना पड़ा है कि इसमें convenience और design system बनाने की झंझट को abstract करने जैसी मज़बूतियाँ हैं लेकिन लंबी अवधि में देखें तो अपने design system और component library में सीधे निवेश करना DX, flexibility, aesthetic language और dependency के लिहाज़ से कहीं अधिक ठोस समाधान बनता है