Tailwind प्लेग्राउंड

Tailwind प्लेग्राउंड का उपयोग कैसे करें

यह प्लेग्राउंड आधिकारिक Tailwind CSS v4 ब्राउज़र कंपाइलर को पूरी तरह आपकी मशीन पर चलाता है। आप बाईं ओर यूटिलिटी क्लास के साथ सादा HTML टाइप करते हैं, कंपाइलर सैंडबॉक्स्ड प्रीव्यू iframe के भीतर मैच करती CSS बनाता है, और नीचे का पैनल बनी हुई सटीक स्टाइलशीट दिखाता है। कुछ भी अपलोड नहीं होता: कंपाइलर, आपका मार्कअप और आपके ड्राफ़्ट सब ब्राउज़र में रहते हैं।

1. Template सेलेक्टर से शुरुआत चुनें: Hero, Card grid, Pricing table या Blank; आपका टेक्स्ट विज़िट के बीच अपने आप भी रीस्टोर हो जाता है।
2. बाएँ एडिटर में HTML एडिट करें। Tab दबाने पर दो स्पेस घुसते हैं, और टाइप करना रोकने के लगभग 500 ms बाद प्रीव्यू फिर कंपाइल होता है।
3. लाइन ब्रेकिंग नियंत्रित करने के लिए Soft wrap टॉगल करें, और एडिटर टेक्स्ट साइज़ सेट करने के लिए फ़ॉन्ट साइज़ सेलेक्टर इस्तेमाल करें।
4. प्रीव्यू डॉक्यूमेंट में "dark" क्लास जोड़ने के लिए Dark preview चालू करें; dark:bg-slate-900 जैसी यूटिलिटी तुरंत असर करती है।
5. Compiled CSS पैनल में बने रूल पढ़ें और ज़रूरत पर Copy CSS से कॉपी करें।
6. कच्चे मार्कअप के लिए Copy HTML इस्तेमाल करें, या कंपाइल की CSS इनलाइन वाली स्टैंडअलोन फ़ाइल पाने के लिए Download HTML — ऑफ़लाइन खोलने के लिए तैयार।

कम से कम एक कंपाइल के बाद ही डाउनलोड में असली स्टाइल आते हैं, इसलिए एक्सपोर्ट से पहले प्रीव्यू को एक बार रेंडर होने दें। बने CSS को छोटा करने के लिए टेम्पलेट से बेकार एलिमेंट हटा दें — पैनल हमेशा आपके मौजूदा मार्कअप की सटीक ज़रूरत दिखाता है।