Tailwind CSS

Tailwind CSS एक utility-first CSS फ़्रेमवर्क है जो सीधे HTML में लिखी छोटी, एक काम वाली क्लास से पेज को स्टाइल करता है। p-4, text-center और bg-blue-500 जैसी हर क्लास एक स्टाइल सेट करती है। डेवलपर इन क्लास को मिलाकर बिना ज़्यादा कस्टम CSS लिखे कोई भी डिज़ाइन बना लेते हैं।

utility-first CSS का मतलब है हर कंपोनेंट के लिए कस्टम क्लास लिखने की बजाय कई छोटी, एक-एक काम करने वाली क्लास से डिज़ाइन बनाना। एक बटन को उसका रूप पैडिंग, रंग, बॉर्डर रेडियस और फ़ॉन्ट वेट की क्लास से मिलता है। इस तरीके से स्टाइल मार्कअप के पास रहती हैं और लगातार बढ़ती बड़ी स्टाइलशीट से बचा जाता है।

डेवलपर Tailwind CSS इसलिए चुनते हैं क्योंकि यह स्टाइलिंग तेज़ करता है और आख़िरी CSS फ़ाइल छोटी रखता है। हर बदलाव के लिए क्लास के नाम सोचने या HTML और CSS फ़ाइलों के बीच आने-जाने की ज़रूरत नहीं रहती। Tailwind CSS स्पेसिंग, रंग और फ़ॉन्ट साइज़ का एक जैसा पैमाना भी देता है, जिससे डिज़ाइन व्यवस्थित रहता है।

Tailwind CSS कस्टम डिज़ाइन बनाने के लिए लो-लेवल यूटिलिटी क्लास देता है, जबकि Bootstrap नेवबार, कार्ड और मोडल जैसे तैयार कंपोनेंट देता है। कम डिज़ाइन काम के साथ सामान्य रूप के लिए Bootstrap तेज़ है। जब प्रोजेक्ट को डिफ़ॉल्ट थीम से जूझे बिना अपना अनोखा डिज़ाइन चाहिए, तब Tailwind CSS बेहतर है।

Tailwind CSS, npm से इंस्टॉल होता है और प्रोजेक्ट के बिल्ड टूल, जैसे Vite, PostCSS या Tailwind CLI, से जोड़ा जाता है। Tailwind CSS वर्ज़न 4 में आप पैकेज जोड़ते हैं, फिर अपनी मुख्य CSS फ़ाइल के ऊपर @import "tailwindcss" से उसे import करते हैं। आधिकारिक इंस्टॉलेशन गाइड में Laravel, Next.js और Vite समेत हर आम फ़्रेमवर्क के छोटे कदम दिए हैं।

हाँ, Tailwind CSS उन शुरुआती लोगों के लिए ठीक है जो margin, padding, flexbox और grid जैसी बुनियादी CSS प्रॉपर्टी पहले से समझते हैं। हर Tailwind क्लास एक असली CSS प्रॉपर्टी से जुड़ी है, इसलिए पहले CSS सीखने से क्लास पढ़ना आसान हो जाता है। जो शुरुआती CSS की बुनियाद छोड़ देते हैं, उन्हें अक्सर Tailwind CSS में लेआउट ठीक करने में दिक्कत होती है।

CSS जानने वाले ज़्यादातर डेवलपर कुछ ही दिनों में Tailwind CSS के साथ काम करने लगते हैं। क्लास के नाम साफ़ पैटर्न पर चलते हैं, इसलिए क्लास का एक समूह सीखने से बाकी का अंदाज़ा लग जाता है। रिस्पॉन्सिव वेरिएंट, कस्टम थीम और कंपोनेंट पैटर्न में माहिर होने में असली इस्तेमाल के कुछ हफ़्ते लगते हैं।

Tailwind CSS में रिस्पॉन्सिव डिज़ाइन किसी भी यूटिलिटी क्लास के आगे sm:, md: और lg: जैसे ब्रेकपॉइंट प्रीफ़िक्स जोड़कर काम करता है। Tailwind CSS मोबाइल-फ़र्स्ट है, इसलिए बिना प्रीफ़िक्स वाली क्लास सभी स्क्रीन पर लागू होती है, और प्रीफ़िक्स वाली क्लास उस ब्रेकपॉइंट और उससे ऊपर लागू होती है। उदाहरण के लिए, text-sm md:text-lg फ़ोन पर छोटा और चौड़ी स्क्रीन पर बड़ा टेक्स्ट देता है।

Tailwind CSS के डिफ़ॉल्ट ब्रेकपॉइंट हैं sm 640 पिक्सल पर, md 768 पिक्सल पर, lg 1024 पिक्सल पर, xl 1280 पिक्सल पर और 2xl 1536 पिक्सल पर। हर ब्रेकपॉइंट एक न्यूनतम चौड़ाई है, जो Tailwind के मोबाइल-फ़र्स्ट तरीके से मेल खाता है। प्रोजेक्ट अपनी थीम सेटिंग में इन वैल्यू को बदल सकता है या नए ब्रेकपॉइंट जोड़ सकता है।

Tailwind CSS में डार्क मोड किसी भी क्लास के आगे dark: प्रीफ़िक्स लगाकर जोड़ें, जैसे dark:bg-gray-900। डिफ़ॉल्ट रूप से Tailwind CSS विज़िटर के ऑपरेटिंग सिस्टम की सेटिंग मानता है। यूज़र को बटन से डार्क मोड बदलने देने के लिए dark वेरिएंट को पेज की किसी क्लास या data एट्रिब्यूट पर निर्भर करने के लिए कॉन्फ़िगर करें।

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

Tailwind CSS से HTML भरा-भरा दिख सकता है, क्योंकि एक एलिमेंट पर कई क्लास हो सकती हैं। ज़्यादातर टीमें दोहराए पैटर्न को अपने फ़्रेमवर्क में कंपोनेंट बनाकर इसे हल करती हैं, जैसे Blade, React या Vue कंपोनेंट। बदले में स्टाइल मार्कअप के ठीक पास दिखती रहती हैं, जिससे बदलाव जल्दी और सुरक्षित होते हैं।

Tailwind CSS प्रोजेक्ट की फ़ाइलें स्कैन करके सिर्फ़ वही क्लास बनाता है जो सच में इस्तेमाल हुई हैं, इसलिए CSS फ़ाइल छोटी रहती है। बिना इस्तेमाल वाली यूटिलिटी आख़िरी स्टाइलशीट तक पहुँचती ही नहीं। Tailwind CSS से बनी आम प्रोडक्शन CSS फ़ाइल बड़ी साइटों के लिए भी छोटी होती है।

Tailwind CSS में @apply डायरेक्टिव से आप अपने CSS नियमों के अंदर Tailwind यूटिलिटी क्लास इस्तेमाल कर सकते हैं। यह उस कंटेंट को स्टाइल करने में काम आता है जो आपके नियंत्रण में नहीं, जैसे टेक्स्ट एडिटर से बना HTML। Tailwind टीम इसे कम इस्तेमाल करने की सलाह देती है, क्योंकि स्टाइल दोबारा इस्तेमाल करने के लिए कंपोनेंट आमतौर पर ज़्यादा साफ़ तरीका है।

हाँ, Tailwind CSS, Laravel के साथ अच्छी तरह काम करता है, और नए Laravel प्रोजेक्ट इसे Vite के साथ इस्तेमाल करने के लिए पहले से सेट आते हैं। आप Blade टेम्पलेट में Tailwind क्लास लिखते हैं और Vite आख़िरी CSS बनाता है। Laravel के स्टार्टर किट भी अपनी लॉगिन और डैशबोर्ड स्क्रीन के लिए Tailwind CSS इस्तेमाल करते हैं।

हाँ, Tailwind CSS, React, Vue, Svelte और ज़्यादातर दूसरे JavaScript फ़्रेमवर्क के साथ काम करता है। क्लास कंपोनेंट के मार्कअप में React में className और Vue में class के ज़रिए लिखी जाती हैं। हर कंपोनेंट अपनी क्लास ख़ुद रखता है, इसलिए Tailwind CSS कंपोनेंट-आधारित फ़्रेमवर्क के साथ अच्छी तरह फ़िट होता है।

Tailwind CSS का सर्च रैंकिंग पर सीधा असर नहीं होता, लेकिन यह CSS फ़ाइल छोटी और पेज तेज़ रखकर SEO में अप्रत्यक्ष रूप से मदद कर सकता है। पेज स्पीड Google के पेज एक्सपीरियंस संकेतों का हिस्सा है। फिर भी कंटेंट, पेज का ढाँचा और HTML सिमैंटिक्स स्टाइलिंग टूल से कहीं ज़्यादा मायने रखते हैं।

Tailwind CSS में arbitrary वैल्यू से आप ऐसी सटीक वैल्यू इस्तेमाल कर सकते हैं जो थीम में नहीं है, उसे स्क्वेयर ब्रैकेट में लिखकर। उदाहरण के लिए, w-[37%] या top-[117px] उसी समय उस सटीक वैल्यू की क्लास बना देता है। arbitrary वैल्यू एक बार वाले मामलों में काम आती हैं, लेकिन बार-बार इस्तेमाल होने वाली वैल्यू थीम में होनी चाहिए।

Tailwind CSS में hover और focus स्टेट यूटिलिटी क्लास के आगे hover:, focus: या active: जैसा स्टेट प्रीफ़िक्स जोड़कर काम करते हैं। उदाहरण के लिए, bg-blue-500 hover:bg-blue-600 माउस ऊपर आने पर बटन को गहरा कर देता है। प्रीफ़िक्स को ब्रेकपॉइंट और डार्क मोड के साथ मिलाया जा सकता है, जैसे md:hover:underline।

नहीं, Tailwind CSS में ख़ुद सिर्फ़ यूटिलिटी क्लास होती हैं, मोडल या नेवबार जैसे तैयार कंपोनेंट नहीं। तैयार कंपोनेंट अलग संग्रहों से आते हैं, जैसे आधिकारिक Tailwind Plus या daisyUI और Flowbite जैसी कम्युनिटी लाइब्रेरी। कई टीमें यूटिलिटी के ऊपर अपना छोटा कंपोनेंट सेट ख़ुद बनाती हैं।

हाँ, Tailwind CSS, rtl: और ltr: वेरिएंट और लॉजिकल यूटिलिटी क्लास के ज़रिए दाएँ से बाएँ लेआउट सपोर्ट करता है। ms-4 और pe-2 जैसी लॉजिकल क्लास लाइन की शुरुआत या अंत पर margin और padding सेट करती हैं, इसलिए अरबी में अपने आप उलट जाती हैं। इससे एक ही मार्कअप अंग्रेज़ी और अरबी दोनों पेजों के लिए काम करता है।

Tailwind CSS वर्ज़न 4 ने कॉन्फ़िगरेशन को @theme ब्लॉक और एक @import लाइन के साथ CSS में ला दिया। वर्ज़न 4 में तेज़ बिल्ड इंजन, कंटेंट फ़ाइलों की अपने आप पहचान और cascade layers जैसे आधुनिक CSS फ़ीचर भी आए। वर्ज़न 3 से अपग्रेड करने वाले ज़्यादातर प्रोजेक्ट अपना कोड अपडेट करने के लिए आधिकारिक अपग्रेड टूल इस्तेमाल कर सकते हैं।

Tailwind CSS शायद तब न चाहें जब प्रोजेक्ट को लगभग बिना कस्टम डिज़ाइन के तैयार कंपोनेंट का पूरा सेट चाहिए, या टीम पारंपरिक CSS लिखना पसंद करती है। कुछ स्टाइल वाले छोटे स्टैटिक पेज को शायद किसी फ़्रेमवर्क की ज़रूरत ही न हो। Tailwind CSS का सबसे ज़्यादा फ़ायदा लगातार बढ़ते कस्टम डिज़ाइन वाले प्रोजेक्ट में होता है।

Tailwind CSS क्लास को व्यवस्थित रखने के लिए दोहराए पैटर्न को कंपोनेंट में बदलें और क्लास को एक जैसे क्रम में रखें। Tailwind CSS के लिए आधिकारिक Prettier प्लगइन सेव करने पर क्लास अपने आप क्रम में लगा देता है। ब्रांड के रंग और स्पेसिंग थीम में तय करने से भी क्लास छोटी और एक जैसी रहती हैं।

हाँ, Tailwind CSS, MIT लाइसेंस के तहत ओपन सोर्स है, इसलिए इसे निजी और कमर्शियल दोनों प्रोजेक्ट में इस्तेमाल किया जा सकता है। लाइसेंस किसी भी प्रोडक्ट में Tailwind CSS को इस्तेमाल करने, बदलने और शिप करने की अनुमति देता है। सोर्स कोड GitHub पर सार्वजनिक है, जहाँ कोई भी उसे पढ़ सकता है और समस्याएँ रिपोर्ट कर सकता है।