Up next in 10
Introduction to Tailwind CSS & Utility first Workflow_ Tailwind Tutorial #1
17 views
Feb 21, 2024
"Introduction to Tailwind CSS & Utility-first Workflow: Tailwind Tutorial #1" is a video tutorial aimed at developers interested in learning about Tailwind CSS, a utility-first CSS framework. The tutorial provides an overview of Tailwind CSS and explains its utility-first approach, which emphasizes the use of small, single-purpose utility classes to style HTML elements. Throughout the video, viewers can expect to gain insights into how Tailwind CSS can streamline the development process by enabling rapid prototyping and efficient styling, making it a valuable tool for building modern web applications.
View Video Transcript
0:00
इस係 वीडियो में मैं आपको Tailwind CSS स्टार्टिंग से लेकर एंड तक सिखाऊंग�
0:04
Tailwind CSS एक Utility First Framework है जो कि आप लोगों को आपके HTML पेजेस को बिना आपके HTML फाइल को लीव करे�
0:12
स्टाइल करने में मदद करता है इसका simply मतलब यह हुआ कि आप कुछ utility classes add करोगे अपने HTML tags के अंद�
0:18
और सिर्फ इन classes को add करके आप लोग design करेंगे अपने pages क�
0:22
आपको explicitly CSS नहीं लिखनी पड़ेगी जब भी मैं कोई नया framework सीखता हूँ तो मेरे दिमाग में यही आता ह�
0:29
यह एक और framework, अब इसका भी framework सीखना पड़ेगा लेकिन Tailwind CSS एक ऐसा framework ह�
0:34
जो कि अगर आप लोगों ने सीख लिया तो आप लोग कभी भी इस decision को regret नहीं करोग�
0:39
क्योंकि यह आप किस तरह से CSS लिखते हैं इस चीज को change कर देग�
0:44
थ्रूआउट आपके web development career इसका एक और reason tailwind का easy to use nature भी ह�
0:50
क्योंकि by default जब आप अलग से एक दूसरी file में CSS लिखते है�
0:53
और उसके बाद उसको map करते हैं अपनी HTML file में तो काफी परिशानी होती ह�
0:58
लेकिन जब आप HTML के अंदर ही अपने styles को लिखते है�
1:02
using tailwind utility classes तब उसका development का जो experience होता ह�
1:06
यह आपको तभी बता चलेगा जब आप Tailwind CSS की मदद से कुछ projects बनाएंग�
1:11
Luckily मैंने इस course के अंदर बहुत अच्छे projects प्लान कर रखे है�
1:15
एक typical HTML, CSS और Vanilla JavaScript द्वारा बनी हुई website क�
1:20
design करने का workflow कुछ इस तरह से होता है आप लोग HTML files बनाते हैं, आप लोग CSS files बनाते है�
1:26
HTML फाइल में आप लोग ID और classes का प्रियोग करते हैं, और CSS फाइल में आप लोग उन ID, classes और कुछ tags को style करते हैं
1:34
तो जब भी आप लोग styling करते हैं, तो आप लोग अपनी HTML फाइल को छोड़ कर CSS फाइल में जाते हैं
1:39
और अगर आप लोगों ने मेरा कोई Pure HTML, CSS और JavaScript वाला project देखा होग�
1:43
तो आप लोगों को पता होगा कि कितना pain होता है HTML को छोड़ कर CSS में जान�
1:48
और विर वापस आकर उसकी remapping करना Tailwind CSS में workflow कुछ ऐसा रहेग�
1:52
आप लोग Tailwind CSS को setup करेंगे और Tailwind CSS को अपनी HTML में इंट्रूट करने के बा�
1:58
आप सिर्फ HTML के अंदर code लिखेंगे अलग से CSS files आप लोगों को नहीं बनानी पड़ेंग�
2:03
और तो और जिस tag पर आप लोग classes डालेंगे वो tag वहीं के वहीं आपको style होता हुआ दिखेग�
2:09
और सिर्फ HTML को read करने के बाद ही आप लोगों को पता चल जाएग�
2:12
कि ये tag कौन कौन से designs और styles को use कर रहा ह�
2:17
इस वीडियो में हम लोग सीखेंगे कि कैसे Tailwind CSS और ये जो workflow है Tailwind CSS का इसको setup करना ह�
2:23
किस तरह से quickly place EDN को इस्तेमाल करना है जो कि Tailwind CSS डेवलपमेंट के लिए प्रदान करता ह�
2:29
और किस तरह अपनी प्रोड़क्शन अप्लिकेशन में Tailwind CSS को इंक्लूड करना ह�
2:32
लास्ट बट नॉट दे लीस्ट हम कुछ बहुत अमेजिंग प्रोजेक्ट्स करेंगे और रेल वर्ड वेबसाइट्स बनाएंग�
2:56
Tailwind CSS 3 onwards जो classic engine है Tailwind का उसने jet engine यानि कि just in time
3:01
engine को replace कर दिया है अब इन सारी चीज़ों का क्या मतलब ह�
3:05
ये तो मैं आप लोगों को इस course के अंदर ही बताऊंगा और तो और place CDN भी जो Tailwind का ह�
3:09
वो काफी अच्छी तरह से improve होके इस बार आया है तो देर की इस बात की यार चलते हैं computer screen में और tailwind CSS को setup करते है�
3:18
कुछ ऐसी चीज़ें आप लोगों को बताने वाले हो इस course में जो कि आपके web development journey को हमेशा हमेशा के लि�
3:24
in a positive way influence करेगा आप लोगों को websites बनाने में मज़ा आने लगेग�
3:28
आपकी development workflow बहुत fast हो जाएगी और आपकी जो speed है जिससे आप development करते है�
3:34
वो भी बहुत बढ़िया हो जाएगी let's get started so finally मैं आचोकर अपनी computer screen के दौ�
3:49
अब याबर कुछ चीज़े install करवाँगा आप लोगों को पहली चीज़े visual studio code जो की मैं उमीद करूँग�
3:55
कि आप सभी के पास होगी इसको install कर लेना और install करने के बाद यहाँ पर कुछ इस तरह से आप इ�
4:00
folder को खोल लेना अगर आप लोगों ने इसको install कर लिया है ठीक से तो आप लोग file open folder करक�
4:06
या फिर किसी folder के अंदर जाकर right click करके open with code कर सकते हैं तो मैं right click करक�
4:11
जैसे open with code पर click करूँगा तो इस तरह से मेरा ये folder खुल जाएगा ठीक ह�
4:15
अब यहाँ पर मैं करूँगा क्या tailwind css को install करूँगा और tailwind css को install करने की मुझे जरूरत नहीं ह�
4:20
मैं आपलों को बताता हूँ इस बात का क्या मतलब है index boilerplate template simply tailwind simply div div heading heading
4:54
बहुत ही quickly include करूंगा और आप लोग क्या करें कि Tailwind CSS की documentation में आए�
4:59
get started पर click करें जो Tailwind CSS की website है वहाँ पर आने के बाद जब आप get started पर click करते है�
5:04
और play CDN पर click करते हैं तो एक script tag होता है ये वाला इसे आप लोगों ने copy करना है और अपने head के अंदर डाल लेना ह�
5:13
अपने head के अंदर नहीं, इसके head के अंदर, website के अपने head के अंदर, ठीक है
5:17
अपने head में मत डाल लेना, अब इसको मैं save करूँगा, और क्या करूँगा, एक और extension
5:21
install करूँगा, जिसका नाम है live server, already install हुआ है मेरे computer में, इसको install कर लेना
5:25
और इसको जब आप install कर लोगे तो एक option आता है right click करके open with live server का ठीक ह�
5:30
और यहाँ पर आप लोग देखो this is blue text लिखकर आ गया है लेकिन यह class यहाँ पर apply हुई नहीं blue text वाल�
5:36
actually class का नाम गलत है तो मुझे यहाँ पर text blue 100 करना पड़ेगा और text blue 100 करने के बा�
5:42
मैं helpless करूंगा कि ब्लू करका टेक्स्ट आ जाएगा है टेक्स्ट लूप अंटर का मतलब बहुत ही लाइट वाला य�
5:47
ब्लू कलर होता है और मैं आप दिल्दी से क्या करूंगा इसको 900 कर दूंगा ताकि कम से कम यार थोड़ा गारा तो दिख�
5:52
यह ब्लू कलर है, यह ब्लू कलर है, तो हम इस तरह की ग्लासेज को एड कर सकते हैं, और इस ग्लासेज को इस तरह की ग्लासेज को एड करने के बाद बहुत अच्छी वेबसेट्स बना सकते हैं, यही टेलविंड सीएसस की ब्यूटी है, ब्यूटी यह है कि HTML फाइल के अंदर �
6:22
आप लोग देखो टेलबेट इंस्टॉल करने के बाद यह इंक्लूड हो गया इसके बाद यह इंक्लूड हो गया और यह मैंने अभी इंक्लूड किय�
6:27
एडिटर डॉट मॉजवील जूम ठीक है और यह करने के बाद मैं क्या करूंगा स्क्रीन कास्ट मोड को ऑन करूंगा और यह का�
6:34
मैं आप लोगों के लिए कर रहा हूं और ऐसा इसलिए कर रहा हूं कि जो कुछ मैं टाइप करूं वह आप लोगों यहां पर ज�
6:38
देखने को मिल जाए तो स्क्रीन कास्ट मोड को ऑन करने के लिए आपको राइट लिख करें कमांड पैलेट में जाना पड़ता है और यहाँ पर स्क्रीन कास्ट मोड लिखकर इसको टॉगल कर लो कुछ इस तरह से अब यहाँ पर एक चीज मैं यहाँ पर करना पसंद करता हू�
7:08
यहाँ पर देखने को मिलेगा, अब एक बात यहाँ पर मैं आप लोगों को बोलना चाहता हूँ, कि Tailwind CSS कोई ऐसी चीज़ नहीं है
7:14
कि जैसे इतनी बड़ा framework है Tailwind CSS, कि आप जो है, छे महिने में सीखोगे
7:18
आठ महिने में सीखोगे, दस साल में सीखोगे, नहीं ऐसा नहीं है एक basic HTML
7:23
CSS JavaScript की understanding आपको Tailwind CSS मातर दो हफ़ते में मैंने बहुत जादा बोल दी है और practice
7:28
अगर आप करना चाहते हैं तो एक महीना और आप master बन जाएंगे और इस course मे�
7:32
मैं यही चीज आप लोगों को practically prove करके दिखाना चाहता हूँ कि Tailwind
7:36
इससे इस्तेमाल करके कितनी तेज़ वेबसाइट बनती है और बिना वो जो आपका जैसे कि आप कोई भी फ्रेमवर्क यूज करते हैं तो उसकी स्म�
7:43
स्मिल का मतलब आप बूटस्ट्राप अगर यूज करोगे तो कहीं ना कहीं देखकर बदा जा जाता है साइड को कि आप यह साइ�
7:49
बूटस्ट्राप से बनी है वह चीज स्टेल में मुझे कहीं ना कहीं मुझे लगता है कि नहीं होती है हालांकि अगर आप ए�
7:54
developer हैं तो bootstrap में से भी उस smell को आप हटा सकते हैं, लेकिन यार जब आप components copy करते हो
7:59
तो हाँ वो चीज रह जाती है, ठीक है, तो with that set हम लोग क्या करेंगे
8:04
कि और classes add करेंगे, और कुछ बनाई लेते हैं, मालो मैं यहाँ पर एक nav bar बनाना चाहता हूँ
8:09
तो मैं यहाँ पर जल्दी से code में आओंगा अपने तो यहाँ पर कुछ जो है बना कर देख लेते है�
8:13
मानलो मैं यहाँ पर nav बार बनाना चाहता हूँ तो मैं यहाँ पर nav लिखूँगा और nav के अंदर li लिखूँग�
8:19
sorry ul लिखूँगा ठीक है और UL के अंदर LI लिखूँगा LI के अंदर मान लो मैं लिखता हूँ Home
8:25
और एक और मैं LI बनाना चाहता हूँ उसमें मैं लिखता हूँ About
8:29
एक और LI बनाना चाहता हूँ उसमें मैं लिखता हूँ Contact ठीक है मैं बहुती Rough Example यहाँ पर आपलो को दे रहा हू�
8:34
और इसको मैं live server से खोलूगा right click open with live server और ये देखो ये खुल गया live server स�
8:39
और ये देखो कुछ इस तरह से ये दिखाई पढ़ रहा है मुझे ठीक है तो मैं सबसे पहले तो क्या करूँग�
8:42
कि अपनी nav में class एड़ करूँगा MX4 ठीक है MX4 से क्या होग�
8:47
कि x में इसको margin मिल जाएगी 4 की यह सारी चीज़ें मैं आप लोगो�
8:51
अच्छी तरह से बताऊंगा मैं आपको बता रहा हूँ classes tension code x margin
9:24
इसको इस तरह से देखना चाहता हूँ और इसमें tailwind में एक quick search का option होता ह�
9:28
जैसे कि मान लो मैं यहाँ पर space search कर रहा हूँ ठीक है space between यहाँ पर इस तरह स�
9:34
आप लोग कर सकते हो मान लो मैं कुछ भी search करता हूँ ठीक है मान लो मैं यहाँ पर margin लिख रहा हू�
9:39
ठीक है और यहाँ पर देखो मार्जिन टू एसिंगल साइड एड हॉरिजोंटल मार्जिन स्क्रॉल मार्जिन और प्री फ्लाइट कई चीजें यहां पर आप लोगों को देखने को मिल रही है ठीक है तो आप इनको खोल-खोल कर देख सकते हो अब मान लो कि मैं क्या करना चाह�
10:09
इसको वह भी बताऊंगा आप लोगों में मैं काम करूंगा इसको पैडिंग एक्स दे दूंगा चार की और मैं अपने इ�
10:16
बस एक नवार आप लोगों को यहां पर बना कर दिया हूंगा इस ब्लू टेक्स्ट रड़ा देता हूं यहां से यह ब्लू टेक्स्�
10:20
कोई sense नहीं बनता, या फिर एक काम करूँगा यहाँ पर, MX 12 कर दूँगा, I'm not sure अगर MX 12 नाम की class होती है
10:27
तो मैं यहाँ पर क्या करूँगा, margin में जाऊँगा, margin, और यहाँ पर मुझे पता जाएगा कौन-कौन सी classes
10:34
प्रोवाइड की जाती है टेलमेंट दूरा ठीक है तो MX MX 12 का तो नहीं पता बट यहां पर मुझे कुछ मार्जिं�
10:42
देखने को मिल रही है अब देखो यहां पर क्या है मान लोग मैं MX 10 यूज करना चाहता हूं मुझे कैसे पता चलेग�
10:48
कि MX 10 होता भी है कि नहीं होता है, 10 है भी कि नहीं है, यह मैं कैसे बता करूँगा
10:53
देखो, मैं क्या करूँगा, कि Tailwind CSS की एक extension होती है, उसको install करूँगा
10:57
और Tailwind को अच्छे से setup करूँगा, तो वो चीज मैं आप लोग को बता दूँगा, MY करना चाहिए था
11:01
मुझे मैं MX क्यों कर रहा हूँ, MY 12 करना चाहिए था, और MY 12 करके मुझे spacing यहाँ पर मिल गई है
11:06
अब MY 12 हो सकता है class ना होती, सारे numbers की class नहीं होती है
11:11
तो वो सब समझेंगे कि कैसे हमें पता चलेगा, कौन सी class है, कौन सी नहीं है, एक कमाल की extension install करेंगे हम लो�
11:17
और उस extension की साहिता से हम कुछ भी लिखेंगे अपनी classes के अंद�
11:22
हम जब कोई भी एक element लिखेंगे उसके अंदर class is equal to लिखेंग�
11:26
जैसे ही हम लोग class is equal to लिखेंगे न वैसे वहीं के वहीं हम लोगों को देखने को मिल जाएग�
11:31
कौन सी glass available है उस काम को करने के लिए मैं flex लिखूँगा flex की glasses मुझ�
11:35
suggest वोना start हो जाएगी अभी मैं place ADN उसकर रहा हूँ उसलिए मैं tailwind CSS की ज�
11:40
हमारी extension है वो use नहीं कर रहा हूँ हम लोग इसको अच्छे से install करेंग�
11:44
फिर मैं आपको बताऊंगा कैसे इस्तेमाल करना है अभी के लिए मैं क्या करूँगा मैंने PX कर दिया मुझे PY करना थ�
11:49
Y मैं आड़ करनी थी मुझे padding और मानलो मैं इसको एक background देना चाहता हू�
11:53
purple 400 तो 400 purple का background कुछ इस तरह से हो जाएग�
11:59
लगता है मैंने यहाँ पर इसको margin दे रखी है, मैं इसको padding दूँग�
12:02
और इसकी वज़ा बता है कि यहाँ padding देनी है कि मुझे पूरे में color चाहिए था, ठीक है, अब मानल�
12:06
मैं इसके color को white करना चाहता हूँ, तो मैं text white कर दूँग�
12:10
और अब मैं bg को dark कर सकता हूं यानि कि जो इसका background इसको dark कर सकता हूं तो यह देखो यहाँ पर एक बहुत ह�
12:17
basic navigation बार मैंने बना लिया अब मैं चाहता हूं अगर मैं cursor pointer कर दूं तो इन पर जब भ�
12:22
कोई hover करेगा तो cursor pointer होना चाहिए मालो मैं कुछ ऐसा चाहता हूँ तो मै�
12:26
alt दबाकर जहां जहां click करूँगा वहाँ वहाँ मुझे cursors देखने को बिलेगे और ए�
12:29
cursor pointer नाम की class होती है अब आप कोई यार ये classes रटने बैठे क्य�
12:34
नहीं इसकी भी ninja technique बदाऊगा कैसे जब inspect करूँगा, browser में आउँगा
12:54
तो आप लोग देखो, एक warning देखने को मिल रही है, कि CDN.tailwindcss.com
12:58
को production में please इस्तेमाल मत करो, इसको try out करने के लिए इस्तेमाल आप लोग कर सकते हो
13:03
production में मत करो इस्तेमाल इसको, तो मैं यहाँ पर क्या करूँगा
13:07
package live server tailwind install overwhelming but
13:34
मैंने सिर्फ यह copy किया यहां से using post css में आक�
13:38
npm install minus d यह मैंने किया है तो मैं इसको तरह install पे लगा देता हू�
13:43
ठीक है मैंने enter मारा और यहाँ पर आप लोग देखो जैसे ही मैंने enter मार�
13:46
यहाँ पर यह install होना शुरू हो गया एक node modules नाम का folder बनाएगा by the way
13:50
बहुत important, मैंने बताया नहीं अगर node.js install नहीं है आपके computer में, तो यह command ही काम नहीं करेगा, ठीक ह�
13:57
तो install node.js में जाना और download पर click करना windows installer download करना, मैं करके दिखाता हू�
14:03
यह download होना शुरू हो जाएगा, windows installer इसको run करना, next next next next
14:06
default settings के साथ end तक चले जाना और उसके बाद अपने terminal को restart करन�
14:10
या VS Code को restart करना restart ज़रूर करना क्योंकि बहुत सारे लोग जो मेरे पास ये problem लेके आते है�
14:15
क्या Node.js नहीं चल रहा है, NPM नहीं चल रहा है उन लोगों की सबसे बड़ी दिक्कत पता है क्या होती ह�
14:20
उनकी सबसे बड़ी दिक्कत यह होती है कि वो लोग NPM, Node.js को install करने के बाद अपने terminal को restart नहीं करते है�
14:28
कभी-कभी तो यार अपना computer restart करने से भी बहुत help हो जाती है, मैं उसका reason बताता हू�
14:31
जब आप एक computer को restart करते हो तो सारी चीज़े refresh हो जाती हैं तो कोई भी चीज जो की शायद आपकी coding में बादर डालती है
14:38
मैं एक example देता हूँ उस चीज का, बहुती जल्दी से दूँगा, ज़ाड़ा time नहीं लूँगा, जब flask server आप लोग बनाते हैं
14:43
तो कभी-कभी क्या होते हैं, एक से ज्यादा या फिर note server भी बनाते हैं तो एक से ज्यादा server बन जाते हैं और वो servers hang हो जाते है�
14:49
और उसके बाद जब आप नए server बनाते हैं तो उस port पर listen नहीं करते हैं तो computer restart करने स�
14:53
काफी help हो जाती है कभी-कभी, तो कभी आप फस जाओ, तो computer ज़रूर restart कर लिया करो
14:57
ठीक है, with red set हम लोग जल्दी से आएंगे, यहाँ पर हमारा सब कुछ install हो चुका है, एक npm install read ज़रूर करूँगा यहाँ पर
15:03
ठीक है, जो मेरी यहाँ पर package.json money है
15:14
इसके अंदर मैं क्या करूँगा अब यहाँ पर एक script के section मैं बनाऊंगा scripts लिखूँगा यहाँ पर और scripts के अंदर मैं क्या डालूँगा मैं डालूँगा start जब मैं npm start लिखूँ तो read को चला दो मैं कुल मिला कर यह कह रहा हूँ ठीक है npm start पर लिखूँगा तो read चल जाए�
15:44
चलाने के बाद टेल विंड कॉन्फिक्ट टो चीज बनेगी तो मैं कंटेंट में स्टार लिख दूंगा कि वह सारा का सार�
15:50
कंटेंट में टेल विंड यूज करना चाहता हूं और मैं करूंगा क्या एक स्टेंशन का इस्तेमाल करूंगा जिसका ना�
15:55
टेलविंड सीएसेस इंटेलिसेंस ठीक है और आप इसको इंस्टॉल करने के बाद मुझसे कहोगे कि या यह पहले क्यो�
16:01
नहीं बताया तो इतनी आसान चीज थी ठीक है अब देखो इससे क्या होता है इसे सेंशन से क्या होता है मालो�
16:05
यहां पर फ्लेक्स लिखना चाहता हूं मालों मैं आप लिखना चाहता हूं फ्लेक्स तो देखो यह टेलविं�
16:10
से इसे इंटेलिशन दे क्या किया कि मुझे बता रहा है कि मैं फ्लेक्स से डिस्प्ले फ्लेक्स हो जाएग�
16:14
बेक्स वन से यह हो जाएगा अमान लो मुझे पता करना है कि मुझे रेड बैकग्राउंड चाहिए तो कौन-कौन स�
16:19
अवेलेबल है तो मैं बीजी रेड लिखूंगा तो देखो यह सारे अवेलेबल है टेल में मैंने विशेष कोई भी � integer
16:23
और home में red background आ जाएगा, मुझे पता है बहुत खटिया दिख रहा है red background purple में
16:28
but just आप लोग को दिखाना चाता था, ठीक है, अब क्या होता है, font लिखूंगा घर में
16:33
font sans, sans-arif, mono, अलग-अलग fonts भी आप लोग use कर सकते हो, तो यहाँ पर देखो आप लोग
16:38
font अगर आप लोग बदलना चाहते हो तो ये इस तरह से बदल सकते हो तो बहुत सारी classes है�
16:45
और इन classes को ही कुल मिला कर add करके पूरी site बन जाती है सो बात की एक बात तो यार ये ह�
16:49
लेकिन discuss करूँगा अच्छे से आप लोगों बताऊँगा इन सारी चीजों के बारे में यह extension install करके आप लोगों को ऐसा लगेगा कि यह पहले क्यों नहीं करवाय�
16:56
अब जो हम काम करेंगे वो इसी setup pilot काम करेंगे जल्दी से आपको रिवाइस करवाँगा अगले वीडियो में कि हमने क्या किया Conversation
17:32
और explore करेंगे, मज़ा आने वाला है, तब तक के लिए आप लोग ध्यान रखो अपना
17:36
thank you so much guys for watching this video, and I will see you next time
#Skins
# Themes & Wallpapers
#Web Design & Development