@apply directive in Tailwind CSS_ Tailwind Tutorial #9
2K views
Feb 21, 2024
"@apply directive in Tailwind CSS: Tailwind Tutorial #9" is a tutorial video focusing on the advanced feature of the "@apply" directive in Tailwind CSS. This directive allows developers to create custom utility classes by combining existing utility classes into reusable sets of styles. The video demonstrates how to effectively use the "@apply" directive to streamline styling tasks and maintain consistency across a project. Viewers will learn how to define and apply custom utility classes using "@apply", enabling them to efficiently manage and scale their CSS codebase with Tailwind CSS. By the end of the tutorial, developers will have a deeper understanding of this powerful feature and its application in Tailwind CSS projects.
View Video Transcript
0:00
Tailwind CSS के अंदर एक apply directive होती है जिससे कि आप लोग बहुत सारी classes क��
0:04
एक class का नाम देकर अपने elements में apply कर सकते हैं मैं आप लोगो एक बहुती साधरन सा example देता हू��
0:10
अगर आप लोगों ने website बना ये तो आप लोग बहुत relate कर पाएंगे इस example स��
0:14
मान लिज़े आप लोग एक button बना रहे हैं जोकि काफी बड़ा है size में और आप लोग एक छोटा button बना रहे है��
0:19
जोकि थोड़ा छोटा है size में आप लोग अगर चाहते हैं कि ये बड़ा वाला button और ये छोटा वाला button आ��
0:24
throughout the website बार-बार use कर पाएं तो ऐसे में आप लोग चाहेंगे कि इसकी एक BTN class बन जा��
0:31
और इसकी एक BTN SM class बन जाए और आप लोग उसको बार-बार इस्तिमाल कर पाएंग��
0:35
अगर आप लोग ऐसा करना चाहते हैं Tailwinds CSS के अंदर तो आप लोग यूज़ कर सकती है��
0:40
Apply Directive का इस विडियो में हम लोग देखेंगे कि Apply Directive क्या होता ह��
0:44
किस तरह से Apply Directive को उसकरना है और हम लोग ये भी देखेंगे क��
0:48
Apply Directive को अगर आप लोग इस्तिमाल कर रहे हो तो क्या आपको precautions लेनी चाहि��
0:53
किस तरह से आप लोग को Apply Directive दुआरा classes बनानी चाहि��
0:56
कहाँ पर बहुत सारी utility classes एड़ करना चाहिए कितनी utility classes बहुत जादा होती है��
1:02
और कब आप लोगों को Apply Directive का प्रियोग करना चाहिए तो आपको विडियो में आज बनाना चाहि��
1:07
आज आपको विडियो में आज बनाना चाहिए आज हम लोग बात करने वाले हैं एप्लाइड डिरेक्टिफ ने बारे मे��
1:19
अब ये एप्लाइड डिरेक्टिफ क्या है और क्यों उसकरने चाहिए हम लोगों को इस बारे में आप लोगों को बताऊंग��
1:24
और आप लोगों को ये भी बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह ��
1:56
बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बारे में आप लोगों को बताऊंगा कि यह बा��
2:26
चलो यह सारी बातें थो होती रहेंगी अप्लाइड डेरेक्टिव के बारे में जल्दी से बात कर लेते है��
2:30
तो अप्लाइड डेरेक्टिव क्या है बिसीकली कुछ भी नहीं है आप लोग जब बहुत सारी क्लासेड़ डालते थ��
2:36
और मैं आपको एक कमाल और दिखाता हूँ टेल विंड बटन एक्जामपल ठीक है टेल विंड बटन एक्जामपल मैंने आपर ले लिए है��
2:45
और बहुत सारी वेबसाइड़ कुल के आ गई हैं मैं बहुत सींबल सी चीज़ आप लोगो बता रहा हूँ यूजिंग यूटिलिटी टेल विंड के वी वन के अंदर है एक एक एक्जामपल बटन का तो मैं काम करता हूँ टेल विंड की वेबसाइड़ से ही लेता हूँ यह वाला बटन लेता हूँ यह वाला बटन ठीक ह��
2:57
डीफाल्ट नहीं थोड़ा सा मैं विचेतर बटन लुँगा जो की यह वाला ले लेता हूँ यह बड़िया लग रहा है मुझे यह ले लेता हूँ तो मैं कुछ नहीं कर रहा हूँ मैं सिफ कॉपी पेस कर रहा हूँ बहुत ही सिंपल कॉपी पेस जो कि आप बच्चपन स��
3:27
आगे आप देख सकते हो ठीक है और मैं इसको जड़ा सेंटर पे ले आता हूँ अगर आप लोग देखो इस बड़न पर कितनी सारी क्लासेज लगी हुई है इतनी सारी क्लासेज लगी हुई है देखो बहुत सारी क्लासेज लगी हुई है मैं काम करता हूँ इसको इस डि��
3:57
पर कर लो इसके बैकराउन को भी चेंज कर लो अगर कुछ इसके बैकराउन को मैं ग्रीन करना चाहता हूँ और फोर सम विर्ड रीजन मैं हावर पर करना चाहता हूँ इसको येलो तो ये इस तरह से मैं चेंज कर सकता हूँ यहां तक आप लोग को मालूब था कोई बड��
4:27
करी वो है screen cast mode ठीक है तो index.html अगर मैं खोलूं तो word wrap हुआ नहीं क्या word wrap नहीं हुआ यार अब हो गया word wrap ठीक है ठीक है तो मैं कुछ इस तरह से करूँगा और ये करने के बाद आप लोग देखो यहाँ पर मैं ये साली की साली class हैं जो इनको कॉपी करूँगा ठीक है औ��
4:57
apply लिखने से भी पहले मैं अपलाई लिखोंगा dot btn at the rate apply मैं कहूंगा जब भी मैं btn class लगाओ��
5:05
ये सारी चीज़े apply कर देने का ठीक है मैंने क्या कहा जब भ��
5:09
मैं btn class लिखोंगा तब ये सारी चीज़े apply कर लेने क��
5:13
जब यह जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब जब ��
5:43
तब यह चीज यहाँ पर काम नहीं कर रही है देख रहे हो आप लोग येलो ऐसे लिख कर आ रहा है यह बड़र के तवर पर नहीं दिख रहा है और अब मैं अगर यहाँ पर बीटि एन टू लिख दू तो यहाँ पर यह चीज अब्यस्यसली एपलाइ हो जाएगी ठीक है ��
6:13
बिल्कुल साही हो गये लेकिन यहाँ पर एक गर्बर हो गयी यार पता है क्या ये येलो ये भी येलो ये दोनों सेम बन ग��
6:20
अब मान लो एक एक बढ़न के लिए मैं चाहता हूँ कि इस पर्टिकुलर बढ़न पर जब मैं हवर करूं तो मैं चाहता हूँ कि यह ग्रीन हो जाए ठीक है अब आप सुनना मेरी बात को बहुत ध्यान से सुनना ठीक है बहुत ध्यान से सुनना उसकी वज़ाए क्या ��
6:50
तो मैं पता रहा हूँ यह बढ़न तो जैसा है मैं वैसे ही चाहता हूँ लेकिन यह वाला जो बढ़न है मान लो मैं यह चाहता कि इस पर जब मैं हवर करूं तो यह ग्रीन हो जाए तो मैं क्या करूंगा सिम्प्ली हूँ जो मेरा ग्रीन वाला बढ़न है उसका यह फिर ��
7:20
और यह हो भी रहा है अगर मैं इसको ऐसे लिखूंगा तो होगा क्या आप सुनना दियान स��
7:25
अगर मैं इसको ऐसे लिखता हूँ तो होगा यह कि जो मेरी यह CSS यह एड़ की जाएग��
7:30
आप से प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद करें जो आपको प्रश्चाद क��
8:00
आप देखो यहाँ पर text white में border color echo आगया अगर मैं control f करके फिर से text white लिख��
8:05
तो आप लोग देखो कि जो tailwind की utility class text white है वो तो वैसे के वैसे ही बरकरार ह��
8:11
लेकिन text white के अंदर एक border color echo अभी आचुका ह��
8:15
मैंने border color डाला मुझे background color डालना चीज़ा background color ठीक ह��
8:21
और आप लोग देखो यहाँ पर background color echo आगया text white की जगपर background color echo आगय��
8:26
जो की बड़ी अजीब सी चीज़ मैंने कर दी लेकिन मैं कर सकता हूँ यहाँ पर तो मैंने यहाँ पर करा क्य��
8:30
कि जो tailwind की base layer थी component layer थी, utility layer थ��
8:35
उसके बाद मैंने dot median class एड़ करी और उसके बाद मैंने इस चीज़ को एड़ किय��
8:40
अब देखना आप लोग यहाँ पर एक चीज़ देखना मैं इसको बन करता हूँ आप लोग एक चीज़ देखन��
8:44
कि यहाँ पर ही किस line number में मौझूद है यह भी आप देखो जो मेरी इस style.css ह��
8:49
इस में text-wide किस line number में आया 479 में आया ठीक ह��
8:53
और अब यहाँ पर देखना यह चीज़ change हो जाएगी 479 पहले आता है अब फिर 435
8:57
पहले आता है तो जो tailwind की utility class text-wide थी वो पहले ह��
9:03
और जो मेरी custom text-wide class है वो बाद में आप लोग यहाँ पर देख सकते हू��
9:19
वो tailwind की class से पहले आईगी आप देखने रहे हो 392 प��
9:23
मेरी आईगी है tailwind की 438 line number पह आईगी है तो tailwind किस तरह स��
9:27
प्रोसेस कर रहा है इन सब चीज़ों को उसको समझना यहाँ पर बहुत ज़रूरी ह��
9:31
यह मेरे कहने का मतलब है तो I hope आप लोग समझ गए होंगे कि यहाँ प��
9:35
हम लोग डालना चाहते हैं tailwind की utility class से पहले किसी चीज़ को यह उसक��
9:39
बाद तो हम कुछ इस तरह से कर सकते हैं यहाँ पर मैं इस चीज़ क��
9:43
मिठाओंगा text white मैं आप पर background color aqua नहीं करना चाहता लेकि��
9:47
पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर पर ��
10:17
और यहाँ पर मैं आपलाय करना चाहता हूँ लेट असे टेक्स्ट येलो और उसी के साथ साथ मैं आपलाय करना चाहता हूँ बीजी ग्रे टीक है और ग्रे भी नहीं ग्रीन कर देता हूँ ठीक है और मैं इस टेक्स्ट येलो को यूज़ करना चाहता हूँ यहाँ पर टे��
10:47
टेक्स्ट वी आई सी को मैंने आपर अपलाई किया है आप ठीक है अब ठीक है ठीक है अब देखो यहाँ पर आप लोग कि मैं इसको ज़यसे डिलोड करूँगा अपलाइट टेक्स्ट येलो कर दूँगा और टेक्स्ट वी आई सी को मैंने आपर अपलाई किया है आप ठ��
11:17
टेक्स्ट येलो बीजी करीन 400 यहाँ पर यह क्या परॉबलम दे रहा है कहा रहा है क��
11:21
टेक्स्ट येलो का पास नहीं है टेक्स्ट येलो 500 यूज़ कर लो टेक्स्ट येलो पान सो यूज़ कर लो टेक्स्ट येलो पान सो यूज़ कर लो टेक्स्ट येलो पान सो यूज़ कर लो टेक्स्ट येलो पान सो यूज़ कर लो टेक्स्ट येलो पान सो यूज़ कर ल��
11:51
आप देख सकते हों कि ये क्लास काम नहीं कर रही है और इसकी वचाई ये है कि मैंने यूटिलिटी इसको बाद में लिखा है और इनको यहां पर लिखा ह��
11:58
तो मैं अगर ये चाहता हूं कि ये वाली क्लास यूटिलिटी इसको ओवर राइट कर दे तो मुझे इसको यूटिलिटी इसके बाद डलना पढ़ेगा और अब देखो ये चीज़ काम कर रही ह��
12:06
तो जो ओडर होता है वो मैटर करता है टेल विंड की जो यूटिलिटी क्लास था वो अगर आप चाहते हो उपर रहें तो आप ये लेयर जो यूटिलिटी है एट दरेट टेल विंड यूटिलिटी इसको उपर कर द��
12:16
आप लोग चाहते हो कि यूटिलिटी क्लासें के बाद आपकी क्लास आए तो आप कुछ इस तरह से कर दो मैं बीटियन को यूटिलिटी क्लासें से पहले रखना चाहता था इसलिए मैंने यहाँ पर इसको इन दोनों के बीच में फसाया कमपोनेंट और यूटिलिटी के ��
12:46
पर अपने किसी रियल वर्ड प्रोजेक्ट में नहीं चाहूँगा पर आप लोगों को बता रहा था एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक ए��
13:16
पर अपने किसी रियल वर्ड प्रोजेक्ट में नहीं चाहूँगा पर आप लोगों को बता रहा था एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक एक ए��