इस लेख में
Tailwind CSS क्या है और इसे क्यों बदलें
Tailwind CSS एक utility-first CSS फ्रेमवर्क है जो डेवलपर्स को HTML में सीधे छोटी, एकल-उद्देश्यीय क्लासें लगाकर एलिमेंट्स को स्टाइल करने देता है। कस्टम CSS नियम लिखने के बजाय, आप flex, p-4, text-blue-500 और rounded-lg जैसे क्लास नामों का उपयोग करके इनलाइन स्टाइल बनाते हैं।
हालाँकि Tailwind विकास को तेज़ करता है, ऐसी स्थितियाँ होती हैं जहाँ आपको समकक्ष सादा CSS चाहिए होता है। हो सकता है आप Tailwind से हट रहे हों, किसी विशिष्ट स्टाइल को डीबग कर रहे हों, ऐसी टीम के साथ कोड साझा कर रहे हों जो यह फ्रेमवर्क उपयोग नहीं करती, या यह सीख रहे हों कि हर utility क्लास असल में क्या बनाती है। Tailwind को सादे CSS में बदलना उस अंतर को तुरंत पाट देता है।
Tailwind से CSS कन्वर्टर कैसे काम करता है
कन्वर्टर Tailwind utility क्लासें लेता है और समकक्ष मानक CSS गुण एवं मान आउटपुट करता है।
- अपनी क्लासें पेस्ट करें — कोई भी Tailwind क्लास स्ट्रिंग दर्ज करें जैसे flex items-center gap-4 p-6 bg-white rounded-xl shadow-md
- CSS आउटपुट देखें — हर utility को उसके संबंधित CSS घोषणा में हल किया जाता है, जिसे एक ही नियम-ब्लॉक में समूहबद्ध किया जाता है जिसे आप कहीं भी उपयोग कर सकते हैं
- रिस्पॉन्सिव और स्टेट वेरिएंट संभालें — md:, hover: और dark: जैसे उपसर्ग आउटपुट में उचित media query और छद्म-चयनकर्ता में बदल दिए जाते हैं
- कॉपी या डाउनलोड करें — सादा CSS लें और इसे अपनी स्टाइलशीट, कंपोनेंट या ऐसे डिज़ाइन टूल में पेस्ट करें जो मानक CSS वाक्यविन्यास की अपेक्षा करता है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
Tailwind से CSS कन्वर्टर खोलें →Tailwind से CSS रूपांतरण का उपयोग कब करें
Tailwind utilities को मानक CSS में बदलना कई सामान्य विकास और डिज़ाइन परिदृश्यों में उपयोगी है।
- फ्रेमवर्क माइग्रेशन — किसी प्रोजेक्ट को सादे CSS, Sass या किसी अन्य स्टाइलिंग तरीके पर ले जाते समय Tailwind क्लासों से सटीक CSS नियम निकालें
- CSS सीखना — देखें कि हर Tailwind utility क्लास पर्दे के पीछे किससे मैप होती है, जिससे CSS विनिर्देश की गहरी समझ बनती है
- डिज़ाइन सिस्टम प्रलेखन — Tailwind-आधारित प्रोटोटाइप से मानक CSS निर्यात करें ताकि डिज़ाइनर और गैर-Tailwind डेवलपर सटीक मानों का संदर्भ ले सकें
अक्सर पूछे जाने वाले प्रश्न
क्या कन्वर्टर सभी Tailwind क्लासें संभालता है?
कन्वर्टर मुख्य Tailwind CSS utility समूह का समर्थन करता है, जिसमें लेआउट, स्पेसिंग, टाइपोग्राफ़ी, रंग, बॉर्डर, शैडो, ट्रांज़िशन और ट्रांसफ़ॉर्म शामिल हैं। आपकी tailwind.config फ़ाइल में या plugins के माध्यम से परिभाषित कस्टम क्लासें पहचानी नहीं जातीं, क्योंकि कन्वर्टर डिफ़ॉल्ट Tailwind विनिर्देश के साथ काम करता है।
क्या रिस्पॉन्सिव ब्रेकपॉइंट बदले जाते हैं?
हाँ। sm:, md:, lg: और xl: जैसे रिस्पॉन्सिव उपसर्ग डिफ़ॉल्ट Tailwind ब्रेकपॉइंट मानों का उपयोग करके उपयुक्त CSS media query में बदले जाते हैं। आउटपुट रिस्पॉन्सिव स्टाइल को सही ढंग से संरचित media query ब्लॉकों में लपेट देता है।
क्या मैं CSS को वापस Tailwind में बदल सकता हूँ?
यह टूल एक ही दिशा में बदलता है, Tailwind से CSS की ओर। उल्टा रूपांतरण काफ़ी कठिन है क्योंकि कई CSS गुण-संयोजन एक ही Tailwind utility से मैप हो सकते हैं, और कस्टम मानों के सटीक utility समकक्ष नहीं हो सकते। CSS से Tailwind रूपांतरण के लिए, आमतौर पर विशेष टूल या मैन्युअल मैपिंग की आवश्यकता होती है।