निर्भरताएँ

• Shopify CLI: एक कमांड-लाइन इंटरफ़ेस टूल जो आपके Shopify थीम को विकसित और प्रबंधित करने में आपकी सहायता करता है।
• टेलविंडसीएसएस: तेजी से कस्टम डिजाइन बनाने के लिए एक उपयोगिता-पहला सीएसएस ढांचा।

स्थापित करना

हम टेलविंड को एक स्टैंडअलोन सीएलआई टूल के रूप में उपयोग कर रहे हैं। अधिक जानकारी के लिए, आप आधिकारिक मार्गदर्शिका देख सकते हैं।

नोट: यदि आप इसे इंटेल प्रोसेसर वाले मैक पर सेट कर रहे हैं, तो नीचे दिए गए कमांड में मैकओएस-आर्म64 को मैकओएस-x64 से बदलें।

1. एआरएम64 आर्किटेक्चर के साथ मैकओएस के लिए नवीनतम टेलविंडसीएसएस बाइनरी डाउनलोड करें:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. डाउनलोड की गई फ़ाइल को निष्पादन योग्य बनाएं:

   chmod x टेलविंडसीएसएस-मैकओएस-आर्म64

3. निष्पादन योग्य को अधिक सुविधाजनक नाम पर ले जाएं:

   एमवी टेलविंडसीएसएस-मैकओएस-आर्म64 टेलविंडसीएसएस

4. टेलविंडसीएसएस वॉचर चलाएँ:

   • यह कमांड आपकी टेलविंडसीएसएस स्रोत फ़ाइल (./assets/tailwind.css) में परिवर्तनों पर नज़र रखेगा और आउटपुट को आपकी वांछित सीएसएस फ़ाइल (./assets/style.css) में संकलित करेगा:

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

प्रकाशित करना

जब आप उत्पादन के लिए अपने सीएसएस को संकलित करने के लिए तैयार हों, तो आपको अपने सीएसएस को छोटा करने के लिए निम्नलिखित कमांड का उपयोग करना चाहिए:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

यह कमांड आपकी इनपुट सीएसएस फ़ाइल (./assets/tailwind.css) लेगा, इसे TailwindCSS के साथ संसाधित करेगा, और उत्पादन के लिए अनुकूलित एक छोटी सीएसएस फ़ाइल (./assets/style.css) आउटपुट करेगा।

निष्कर्ष

इन चरणों का पालन करते हुए, आपने टेलविंडसीएसएस को एक स्टैंडअलोन सीएलआई टूल के रूप में सफलतापूर्वक स्थापित किया है और इसे अपने प्रोजेक्ट में एकीकृत किया है। यह सेटअप आपको टेलविंड के उपयोगिता-प्रथम दृष्टिकोण का उपयोग करके अपने सीएसएस को कुशलतापूर्वक विकसित और प्रबंधित करने की अनुमति देता है। वॉचर चलाने से यह सुनिश्चित होता है कि आपका सीएसएस विकास के दौरान स्वचालित रूप से संकलित है, जबकि न्यूनतमकरण चरण आपके सीएसएस को उत्पादन के लिए तैयार करता है, इसे प्रदर्शन के लिए अनुकूलित करता है। यह सुव्यवस्थित प्रक्रिया एक स्वच्छ और रखरखाव योग्य कोडबेस बनाए रखने में मदद करती है, जिससे आप आसानी से अपनी Shopify थीम के निर्माण और अनुकूलन पर ध्यान केंद्रित कर सकते हैं।