Tailwind CSS क्या है? ऐप बनाने वालों के लिए सरल गाइड

Tailwind CSS वेबसाइटों को स्टाइल करने का एक टूलकिट है। अलग स्टाइल नियम अलग फ़ाइल में लिखने के बजाय आप हर एलिमेंट को छोटे, तैयार class names देते हैं: सफ़ेद पृष्ठभूमि के लिए bg-white, padding के लिए p-4, बड़े टेक्स्ट के लिए text-lg, गोल कोनों के लिए rounded-xl, और Tailwind वह CSS बना देता है जिसकी ब्राउज़र को ज़रूरत है। यह मुफ़्त और open source है, और आज की आधुनिक वेब ऐप्स को स्टाइल करने के सबसे आम तरीकों में से एक है।

AI से ऐप बनाते समय Tailwind क्यों मायने रखता है

अगर आप किसी AI app builder से वेब ऐप बनाते हैं, तो बहुत संभव है कि आपकी ऐप Tailwind से स्टाइल हुई हो। उदाहरण के लिए, Mythex नए प्रोजेक्ट Vite + React + TypeScript + Tailwind पर शुरू करता है, जब तक आप कुछ और न माँगें (तकनीक कैसे चुनी जाती है)।

यह आपके लिए तीन तरह से मायने रखता है:

• डिज़ाइन बदलाव सस्ते होते हैं। स्टाइलिंग हर बटन, कार्ड और हेडिंग के बगल में रहती है, इसलिए AI "कार्ड कम भरे-भरे लगें" जैसे बदलाव एक ही जगह कुछ class names बदलकर कर सकता है।
• आप इसे पढ़ सकते हैं। Tailwind की classes सादी अंग्रेज़ी के करीब हैं। text-center font-bold text-2xl को समझना कठिन नहीं है, भले ही आपने कभी कोड न लिखा हो।
• लुक सुसंगत रहता है। Tailwind आकार, spacing और रंगों का एक तय पैमाना देता है। इससे ऐप में 14 थोड़े-थोड़े अलग स्लेटी रंग नहीं बनते।

एक रोज़मर्रा की मिसाल

पेंट और घर बनाने के बारे में सोचिए।

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

Tailwind ऐसा है जैसे पेंट की दुकान का रंग-चार्ट और लेबल वाले स्टिकर। हर दीवार पर एक स्टिकर लगता है, "सफ़ेद, मैट, 2 कोट", और चार्ट में कुछ चुने हुए ही शेड मिलते हैं। आज़ादी थोड़ी कम होती है, पर काम में लगे सभी लोग स्टिकर पढ़कर जान जाते हैं कि हर दीवार कैसी दिखनी चाहिए।

Tailwind कैसे काम करता है

वेब पेज HTML (सामग्री और ढाँचा) और CSS (लुक) से बनता है। आम तौर पर CSS एक अलग फ़ाइल में ऐसे नियमों के रूप में होता है:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind में आप ऐसा नियम नहीं लिखते, बल्कि utility classes सीधे एलिमेंट पर लगा देते हैं:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

हर class एक छोटा काम करती है। ऐप बनते समय Tailwind आपकी फ़ाइलें स्कैन करता है, जो classes वास्तव में इस्तेमाल हुई हैं उन्हें खोजता है, और सिर्फ़ उन्हीं के लिए CSS बनाता है। इससे अंतिम stylesheet छोटी रहती है।

Tailwind का वर्तमान बड़ा संस्करण version 4 बहुत कम configuration के साथ सेट होता है: आप इसे इंस्टॉल करते हैं, इसका plugin अपने build tool में जोड़ते हैं, और अपनी CSS फ़ाइल के सबसे ऊपर @import "tailwindcss"; लिखते हैं। ब्रांड के रंग और फ़ॉन्ट जैसी कस्टमाइज़ेशन CSS में design tokens के रूप में परिभाषित होते हैं, न कि पुराने संस्करणों की तरह एक बड़ी JavaScript config फ़ाइल में। अगर आप कोई पुराना ट्यूटोरियल पढ़ें जिसमें tailwind.config.js का ज़िक्र है, तो यही कारण है।

एक उदाहरण: प्राइसिंग कार्ड

मान लीजिए आपने AI builder से प्राइसिंग पेज माँगा है और चाहते हैं कि "Pro" कार्ड अलग दिखे। उस कार्ड का कोड (React component में class को className लिखा जाता है) कुछ ऐसा हो सकता है:

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

बाएँ से दाएँ पढ़ें:

अगर आप कहें "Pro कार्ड को नीली border और हल्की shadow के साथ अलग दिखाओ", तो AI border-gray-200 को border-2 border-blue-600 में बदल सकता है और shadow-lg जोड़ सकता है। बस इतना ही बदलाव है।

Responsive design और dark mode

Tailwind में screen sizes और अवस्थाओं के लिए छोटे prefixes होते हैं:

• md:grid-cols-3 — मध्यम और उससे बड़ी screens पर तीन columns; फ़ोन पर डिफ़ॉल्ट एक column लागू होता है। Tailwind mobile-first है: बिना prefix वाली classes हर जगह लागू होती हैं, और prefixes बड़ी screens के लिए बदलाव जोड़ते हैं।
• hover:bg-gray-700 — माउस बटन पर होने पर गहरा बटन।
• dark:bg-gray-900 — dark mode चालू होने पर अलग पृष्ठभूमि।

इसी वजह से Tailwind प्रोजेक्ट में mobile-responsive लेआउट या dark mode माँगना आम तौर पर जल्दी हो जाता है।

मुख्य शब्द

आम गलतफ़हमियाँ

• "Tailwind एक डिज़ाइन है।" ऐसा नहीं है। Tailwind आपको बिल्डिंग ब्लॉक देता है, कोई लुक नहीं। दो Tailwind साइटें बिल्कुल अलग दिख सकती हैं। AI ऐप्स का आम "एक जैसा" लुक डिफ़ॉल्ट्स से आता है, Tailwind से नहीं; अपने builder को असली दिशा दें। देखें AI से अच्छी दिखने वाली ऐप कैसे डिज़ाइन करें।
• "यह inline styles जैसा ही है।" पूरी तरह नहीं। Classes एक साझा पैमाने से आती हैं, hover, dark mode और breakpoints को सपोर्ट करती हैं, और build के समय सामान्य CSS में बदल जाती हैं।
• "Tailwind पेज भारी बनाता है।" Build में सिर्फ़ वही classes शामिल होती हैं जो आप इस्तेमाल करते हैं, इसलिए विज़िटर तक पहुँचने वाली CSS आम तौर पर छोटी होती है।
• "लंबी class सूची का मतलब गंदा कोड है।" शुरू में ये भरी हुई लगती हैं, पर किसी एलिमेंट के लुक की सारी जानकारी एक ही जगह होती है। दोहराए गए पैटर्न आम तौर पर एक component में निकाल लिए जाते हैं, जैसे एक Button।
• "Tailwind इस्तेमाल करने पर कस्टम CSS नहीं लिख सकते।" आप जब चाहें तब सामान्य CSS भी लिख सकते हैं।

AI builder से क्या माँगें

• "ब्रांड के रंग और फ़ॉन्ट एक बार theme tokens के रूप में परिभाषित करें, और हर जगह उन्हीं का इस्तेमाल करें, hard-coded रंगों की जगह।"
• "हर कार्ड, बटन और input में एक ही corner radius और spacing रखें।"
• "फ़ोन की चौड़ाई पर लेआउट जाँचें और जो भी बाहर निकले या छूने के लिए बहुत छोटा हो, उसे ठीक करें।"
• "Tailwind के dark: variant से dark mode जोड़ें और पक्का करें कि टेक्स्ट का कंट्रास्ट पढ़ने लायक रहे।"
• "बार-बार दोहराई जाने वाली बटन स्टाइल को एक reusable Button component में निकालें।"
• "इस सेक्शन की Tailwind classes सादी भाषा में समझाएँ।"

Mythex में Tailwind

नए Mythex प्रोजेक्ट डिफ़ॉल्ट रूप से React और TypeScript के साथ Tailwind इस्तेमाल करते हैं, इसलिए आप दृश्य बदलाव सादे शब्दों में माँग सकते हैं और उन्हें लाइव Preview में देख सकते हैं। अगर आप कोड देखना चाहते हैं, तो कोड एडिटर हर class दिखाता है (Free पर केवल पढ़ने के लिए, Pro पर संपादन योग्य)। अगर आप सादा CSS या कोई अलग सेटअप चाहते हैं, तो पहले प्रॉम्प्ट में बता दें; docs बताते हैं कि स्टैक कैसे चुना जाता है।

सवाल