Up next in 10
Codeswear.com - Project Setup using Tailwind CSS _ NextJs Tutorial for Beginners #34
3 views
Feb 13, 2024
In the video "Codeswear.com - Project Setup using Tailwind CSS _ NextJs Tutorial for Beginners #34," viewers are guided through the setup process of the Codeswear.com project using Tailwind CSS within a Next.js environment. Tailwind CSS is a popular utility-first CSS framework that allows for rapid development by providing pre-built CSS classes. This tutorial, aimed at beginners, covers the initial project setup, including installing and configuring Tailwind CSS within a Next.js application. Additionally, viewers may learn about the basic structure of the project and how to integrate Tailwind CSS classes to style the website efficiently. This episode provides foundational knowledge for beginners to start building responsive and visually appealing web applications with Next.js and Tailwind CSS.
View Video Transcript
0:00
क्योंकि codesware.com एक online project है जिसको हम लोग बनाने वाले हैं end to end
0:04
मैं यहाँ पर styling की जिम्मिदारी देना चाहूँगा tailwind CSS को यानि कि मैं यहाँ पर tailwind CSS का इस्तिमाल करने वाला हूँ for styling
0:12
मैं plain CSS use नहीं करूँगा मैंने इस चैनल पर बहुत सारे वीडियोस बता रहा हू��
0:16
जहाँ मैंने आपको Tailwind CSS के बारे में पता है और क्यों मैं इसको बहुत ज़्यादा पसंद करता हू��
0:20
वो बातें बाद में होंगी अभी के लिए मैं आप लोगों को सेटअप बताऊँगा next.js का tailwind CSS के साथ क��
0:25
क्या setup होने वाला है किस तरह से इस्तेमाल करना है कौन सी वो extensions
0:29
हैं जो कि हम लोग इस्तेमाल करेंगे tailwind CSS का प्रियोग optimally करने के लि��
0:33
और codesware की एक black slate बनाएंगे चलते हैं computer screen मे��
0:37
और इस काम को complete कर लेते हैं सबसे पहला का��
0:49
जो मैं यहां पर करने वाला हूं वह है कि मैं खोलूंगा यहां पर अपनी अगर उनको और मैं जाओंगा टेल विं��
0:55
यह से विधि नेक्स्ट इससे क्या होगा कि ऑफिशल डॉक्यूमेंट डिशन खोलेगी और मुझे सबसे आसानी यहां प��
1:01
यह होगी कि जो ऑफिशल डॉक्स करें वह मैं करूंगा ठीक है जो ऑफिशल डॉक्स में देखकर मैं करूंगा उससे अच्छा मैं कभ��
1:08
नहीं कर सकता ठीक है तो मैंने नेक्स्ट आप तो बना लिए ठीक है ने प्रोजेक्ट के अंदर भी हो अब मैं यहां पर एनपीए��
1:13
यान की सायता से मैं इंस्टॉल करूंगा इस चीज को आप लोग देखना कैसे करूंगा आप लोग एंट्रीम यूज कर सकते हो अ��
1:19
यहां पर सिंपली अगर आप यान यूज कर रहे हो तो आपको यान एड लिखना होता है इन बीम यूज करें तो एडिटर्स कॉप��
1:25
इस मार देना कोई दिक्कत नहीं होगी ठीक है तो यहां पर यह जैसे मैंने किया यह मेरा इंस्टॉल हो गया अ��
1:31
इसके बाद मैं यहां पर एंपी एक्स टेलविंट सीएसस माइकर मैं इसको ऐसे भी कॉपी करके चला दो तो वह दिक्क��
1:37
नहीं चाहिए ठीक है तो यह तो फाइल्स बन गई ठीक है यह तो फाइल्स बनाने के बाद मैं क्या करूंगा इसक��
1:43
टेल विन डॉट कॉन्फिक्ट और जीएस इसके अंदर यह चीज पेस्ट कर दूंगा टेल विन डॉट कॉन्फिक्ट और जीएस क��
1:49
�lla.com पेस्ट कर दूंगा ठीक है तो इस तरह से वर दूंगा और सेव कर दूंगा ठीक है तो इस तरह से लिखा हु��
1:54
है वैसे कि वैसे मैंने कर दिया ग्लोबल्स टॉट चीज में चीज पेस्ट कर दूंगा इकदम अंदर दूंगा कर रहा हू��
1:58
कर रहा हूं बाबा ठीक है कुछ सोच नहीं रहा हूं ऐसी कर रहा हूं बस ठीक है आपको कि ऐसे क्यों करने स��
2:28
तो उसका एक बहुत ही अच्छा solution बताता हूँ कि उड़ाई दो पूरा क्योंकि मैंने styles हटा दिये थे ना इसलिए ठीक है तो styles.logo
2:36
styles.yay एक काम करते हैं सब हटाते हैं ठीक है सब हटा रहे हैं सब हटा रहे हैं सेव करता हूँ अभी भी styles is not defined
2:44
यह कहीं ना कहीं और स्टाइल्स यूज हो रहे हैं क्या हां यह यूज हो रहा derechos यहां दो मैं से बढ़ूंगा और जैस��
2:51
मैं सेव करूंगा अभी क्या दिक्कत आ रही है हां ठीक है इसके अंदर कुछ है ही तो मैं आपको लिख दूं है इस इ��
2:59
अब मैं टेस्ट करना चाहता हूं कि यह चल रही है कि यह ठीक है यह पर लगाऊंगा लगाऊंगा लेकिन लगाऊंगा लेकि��
3:22
मैं लिखता हूं अमेक्स फोर्ड ठीक है और इसके अंदर मैं लिखता हूं इस इस मीडियो हे इस इस कोड्स वेर है और ज��
3:31
हे इस इस मीडियो इस इस मीडियो में एक्स एक्स पर मार्जिन होगी देखते हैं है क्या हां जी है बिल्कुल मजा नहीं आ रह��
3:38
मजा नहीं आया ना मजा दíamos थोड़ा सा देता हूं मजा आपको ठीक है मैं इस बार मजा देने के लिए क्या करूंग��
3:44
बैकरांड लेट करूंगा और यहां बैकरांड यह वाला ऐड करता हूं ठीक है और यहां मैं ऐसे करूंगा आप देखो यहा��
3:48
ब्यागराउरेड होगी या टेल विंड सीएसस चल चुकी है यार अब मैं बड़ा आराम से यूट्यूटी क्लासेस आड़ करक��
3:53
कोडिंग कर सकता हूँ डिजाइन बना सकता हूँ कुछ साइड नोट देना चाहूँगा आप लोगों को यहाँ पर और वह साइ��
3:58
यह एक एक्स्टेंशन यूज कर रहा हूं इन फैक्ट में जो एक्स्टेंशन यूज कर रहा हूं सभी दिखाते तो आपको ठीक ह��
4:06
यह मेरी एक्स्टेंशन का अच्छा चिठ्ठा है ठीक है सब देख लो कौन से यूज कर रहा हूं बन से नहीं कर रहा हूं पता जाएग��
4:11
आपको ठीक है तो कोई भी विचितर सी चीज आपको मेरे विशेष को देखने को मिलती है आपको लगता है वह चीज आपक��
4:17
विशेष को नहीं हो रही है ऐसा नहीं होगा ठीक है यह इंस्टॉल कर लेना कुछ विचितर नहीं होगा ठीक है तो आप 7
4:44
से आरेफ सीजो रियाप्ट का अपना कंपनेंट होता है वह आपको मिल जाएगा ठीक है इसके बाद यह लेंट मैंने डाल��
4:52
इसके बाद जैली फिस्ट थीम डाला हुआ है इसके बाद यहां पर थंडर क्लाइन डाला हुआ है यह पोस्ट में का एक तरह स��
4:58
ऑलटरेट यह पोस्ट में भी यूज कर सकते हैं मैं यह पसंद करता हूं ठीक है आप उस में भी यूज कर सकते कोई दिक्क��
5:03
ठीक है उतनी बड़ी चीज मतलब है नहीं लेकिन हाथ चॉइस होती है सब कि अब यहां पर टेलविंड इस एंटेलि��
5:08
सबसे इंपोर्टेंट एक्सटेंशन पूरे प्रोटेट कि क्यों कह रहा हूं ऐसा मैं ऐसा मैं इसलिए कह रहा हूं य��
5:14
आप लोग यह यह देखो यह देश मी जो लिखा हुआ है यह पर यह देश इस मी में बैकरांड स्लेट आया ही ऐसे कि मैंन��
5:20
यहां पर सिर्फ बीजी एस टाइप कर रहा हूं यह मेरा काम हो गया अपना मालों में आप डिप्ट लिखता हूं और बीज��
5:26
लिखता हूं और इसके बाद लिखता हूं इन फाक्टी ऐसे काम नहीं कर रहा है मैं यहां पर लास्ट करूंगा तो जरूर का��
5:35
करेगा जैसे बात है लिखा तो इतनी सारी सजेक्शन आगे ठीक है अब मैंने यहां पर ग्रीन लिखा देखो इतनी सार��
5:41
आपको अपने प्रश्न आ गई है, मैं इसमें कुछ भी चूज कर सकता हूँ. अगर मैं दो विश्वास का बाकगराउंड कर नहीं कर सकता है
5:47
तो मैं इसको इस तरह से कर दूँगा, लेकिन आप पहले देख रहे हैं। ठीक है, कभी-कभी क्या होता है, देखो ये चीज़ काम आएँगी, आप लोग कोई यूजलेस लगेगी आपको भी
5:54
लेकिन, मैं बता रहा हूँ, बहुत काम आएँगी, जब आप फसोगे तो, कभी-कभी क्या होता है, कि आप अगर यहाँ पर कोई क्लास डाल रहे हो
6:00
मान लो आप MX2 डाल रहे हो ठीक है मान लो मैंने MX2 डाला अब मैंने backspace दबा दिया ठीक ह��
6:04
MX dash 2 डाला मान लो मैंने कभी कभी ये काम नहीं कर रहा है अब देखो MX dash लिखा हुआ ह��
6:09
मुझे suggestion नहीं मिल रही है कभी कभी कई reason से इस चीज़ होती है आप अपने कीबोर में कंट्रोल प्लस पेस बार ठीक है कुछ इस तरह से दबाओ आपकी सजेशन आ जाएंगी और मैं काम करत��
6:19
हूं ना पर स्क्रीन कास्ट मोड आपको आन करके दिखाता हूं जैसे मैंने आपको अपना कंट्रोल प्लस पेस बार अगर मैंन��
6:24
तो यहाँ पर सजेशन आ जाएगी ठीक है तो कभी सजेशन नहीं आ रही है किसी भी तरह की तो कंट्रोल स्पेस ब��
6:29
मारो आप आपको नीचे सजेशन देखने को मिल जाएगी यह तब काम करती है जब आपको बहुत ज्यादा आप लोग फस जाओगे ज��
6:34
और आप इसी बात है कि यहां पर इतनी सारी मैं आप लिखता हूं कुछ हेयर ब्रो और यह लिखने के बाद अब देखो यह इसमे��
6:58
कोड्स बना लगा है जो कि यहां पर है ठीक है तो इसको आप देख सकते हो बहुत छोटा सा कोड्स है ठीक है एकद��
7:03
complete एम एंड में वीडियो बनाया है कॉन्ट्रूजन एंड वेर टू फ्रॉम है ठीक है तो जहां पर मैं आप लोगो��
7:10
यह भी बताएं automotive यह इसका यूज करते हो तो काफी मजा आएगा आपको ��
7:30
थी के चीज को मैं सेव करूंगा जैसी वेब्स लिखने के बाद मेरा काम याद हो जाएगा ठीक है सो आई होप कि मज��
7:37
आ रहा है आप लोगों को इतना जो भी हमने करा एक ब्लैंक स्लेट बना ली टेल बिंट की एक्सटेंशन इंस्टॉल कर लिय��
7:42
ठीक है इतना आप लोग करो अब कई लोगों के साथ क्या होगा कि उनको शायद यह सब चीजें देखने को न��
7:48
मिले तो आप लोग यार यह देखना यह वाली फाइल देखना टेल बिन डोट कांफिक्ट और जीएस इसमें क्या आपने य��
7:53
लिखा है अगर नहीं लिखा है तो इस पर स्टार लिखकर देखना यहां पर यहां पर स्टार लिखकर देखना अगर आप कोई पुरान��
7:59
टूटोरियल कभी यूज कर रहे हो मुझे नहीं बता किस रीजन से बट मालों कोई पुराना कोई और आप रेफरेंस ले र��
8:05
official website नहीं ले रहे हो तो यहाँ पर पहले पर्ज होता था अभी यहाँ पर content कर दिया ये लोगो��
8:10
ने पहले पर्ज होता था module और exports में ये पर्ज property होती है अब change हो गई है ठीक है तो आ��
8:16
आप लोग official जो भी चल रहा है अभी version उसको use करना ठीक है ज्यादा किसी पुराने उस पर म��
8:23
जाना ठीक है मतलब tailwind की site पर जाओ खुलेगी tailwind की site अगर आज से आप ये सौ साल के बाद भी देख रहे ह��
8:30
टोड़ तब भी जो भी चल रहा है उस टाइम पर कॉपी करो पेस करो मजा आएगा ठीक है सो आई हॉप कि आप लोगो��
8:36
ने लेक्स्ट की प्लेलिस्ट को एक्सेस कर लिया होगा मैं बहुत ज्यादा एक्साइडिट है इस प्रोजेक्ट लेक��
8:40
बहुत दमागेतर बनाने वाला हूं आपको लिखे देता हूं ठीक है अभी के लिए इस वीडियो में इतना है गाइस एं��
8:45
सो मच गाइस वाचिंग इस वीडियो एंड आफ वॉइड यू नेक्स्ट आइड ��