Up next in 10
@layer Directive in Tailwind_ Tailwind Tutorial #10
21 views
Feb 21, 2024
"@layer Directive in Tailwind: Tailwind Tutorial #10" explores the usage and benefits of the "@layer" directive within the Tailwind CSS framework. This advanced feature enables developers to organize and control the order in which their utility classes are generated in the final CSS output. The tutorial demonstrates how to leverage "@layer" to manage the specificity of styles and ensure consistent styling across components and layouts. Viewers will learn practical techniques for structuring their Tailwind CSS projects effectively, improving code organization and maintainability. By the end of the tutorial, developers will have a solid understanding of how to utilize the "@layer" directive to optimize their Tailwind CSS workflow.
View Video Transcript
0:00
इस वीडियो में हम लोग देखेंगे कि किस तरह से layer directive का इस्तेमाल किया जा सकता है tailwind CSS के अंद�
0:05
tailwind के अंदर जो तीन layers होती हैं, कभी-कभी हम चाहते हैं कि हम लोग एक particular layer के अंदर changes करे�
0:11
यानि कि हम लोग जो classes add करना चाहते हैं, वो एक particular layer के अंदर add करना चाहते है�
0:16
या कोई भी CSS लिखना चाहते हैं, तो एक particular layer के अंदर लिखना चाहते हैं
0:20
ऐसा हम लोग कर सकते हैं, layer directive का इस्तेमाल करके, एक particular layer को override कर सकते हैं
0:24
इस वीडियो में हम लोग layer directive के बारे में सीखेंगे, और यह सीखेंगे कि layer directive का use क्या है
0:29
है यार हम डिलेक्टली अपने टेलविंड इस जो हमारी इनपूट से इस फाइल है उस पर डिलेक्टली हम लोग नही�
0:34
चेंजेस कर सकते एक पर्टिकुलर लेयर को क्यों लोग ओवरराइड करना चाहिए लेट्स केट स्टार्टेड विडिय�
0:38
ताइम को बिना वेस्ट की मैंने टेलविंड वाली टेंप्लेट को कर लिया कॉपी और यहां पर टेलविंड ट्यूटोरियल 10 का नाम दे दूँगा इसका नाम करल करते हुए मैं राइट लिख करके ओपन विथ कोड करूँगा यह ओपन विथ कोड हो जाएगी यानि कि विए�
1:08
चीजें थी उनको मैं डाल कर रखूंगा अच्छा एक काम करता हूं यहां पर मैं बटन डॉट लेटर से टेक्स्ट ब्ल�
1:17
कर देता हूं डॉट बीजी रेड 600 कर देता हूं ठीक है और टेक्स्ट ब्लू कौन सा वाला करो टेक्स्ट ब्लू य�
1:24
देता हूं ठीक है अब अगर मैं यहां पर npm run start लिख दूंगा तो आप लोग यहां पर देख सकते हो कि मेर�
1:31
जो सर्वर है वह चल चुका है ठीक है अब यहां पर आप लोग देखो जो मैंने बटन बनाया था वह आया है नहीं यह कैस�
1:36
लाख है देखते हैं कैसा मजाक है ऐसा क्यों हो रहा है यार बड़न जो मैंने बनाया वह आना चाहिए ना तो यहां प�
1:42
आप लोग अगर देखो तो मैंने वर्ड लासेस इन यह इसके अंदर कुछ लिखा ही नहीं लिखना तो चाहिए तो कुछ इस इज �
1:50
नाइस दिस्से नाइस नियुक्तित तो कोई बटन के अंदर पूरा पैराग्राफ्ट लिखता है ठीक है चलो लिख भी सकते है�
1:57
कोई यह हमारा घटिया सब रेडिवेट के अंदर ठीक है मुझे पता अच्छा नहीं लग रहा है मैं कॉपी करके अच्छा भ�
2:02
जा सकता हूं ठीक है वैसे भी कॉपी करके बना जाते हैं आजकल सारी अच्छी चीज है मैं यहां पर एक काम करता हू�
2:08
पर राउंडेड एक्सेल कर देता हूं ठीक है थोड़ी सी खुशूरती थोड़ी सी खुशूरती मिल गई बटन को मेरे पैड़िंग क�
2:33
एसम और अगर मुझे अच्छा बनाना इसको तो मुझे ब्लू नहीं बाइट करना पड़ेगा इसको ठीक है तो आप लोग यहां पर देख�
2:38
क्लिक मी काफी अधिक बढ़िया बना दिया हां मुझे पता है कि यह कुछ लोगों को अच्छा भी नहीं लगेगा बट यह काफ�
3:03
और ये कर दूँ और ये चीज में डाल दूँ .btn में तो आप कहोगे या�
3:07
हैरी भाई ये पिछले वीडियो में बताया था यार बार बार क्यों बता रहे हो मैं भी कहूँँ हाई यार बताया थ�
3:14
लेकिन अभी जो मैं बताने वाला वो इससे related है इसलिए इस बात को दुबारा स�
3:18
बोल रहा हूँ dot btn के अंदर अगर मैंने ये apply कर दिया तो अ�
3:21
मैं btn को as a class यूज़ कर सकता हूँ अगर मैं यहाँ पर class is equal to ये सब ना लिख�
3:26
btn लिखो तो काम बन जाएगा ठीक है लेकिन अब यहाँ पर आप एक बात सुन�
3:30
मैं अगर चाहता हूँ कि ये मेरी let us say utility layers के बाद आ�
3:34
component layers के बाद आए base layer के बाद आए तब मुझे यहाँ पर क्या करना पड़ रहा ह�
3:39
इसको इसके बीच और बीच डालना पड़ रहा है अब यह कहाँ पर आएगा बीटी एन मेरी सी एस एस में कहां पर डिफाइंड होग�
3:44
बीटी एन मेरी सी एस एस में डिफाइंड होगी कम्पोनेंट्स लेयर के बाद और यूटिलिटीज लेयर से पहल�
3:50
अगर मैं यह चीज आप लोगों को यहाँ पर दिखाना चाहूँ तो right click करके inspect करूँगा, network पर click करूँगा, network पर नहीं करूँगा
3:55
सीधे elements पर कहीं पर भी click करके, style.css पर click करने के बाद, अगर मैं आप लोगों को btn class दिखाऊं, तो यह 382 में आ रहा है
4:02
यानि कि मेरी सारी की सारी जो component classes हैं और base classes हैं उनके बाद आ रहा ह�
4:07
अगर मैं इस btn को नीचे खिसका दू तो यह यहाँ पर आ जाएगा ठीक है इसको मैं जितना नीचे मन चाहे खिसका सकता हू�
4:13
ठीक है यह बात तो आपको मालूम है लेकिन अगर मैं चाहता हूँ कि मैं अपनी style.css को ऐसे ही रहने दू�
4:19
और मैं इन तीनों lines के बाद add करूँ कभी-कभी क्या होता है कि जो आपकी CSS होती है वो accessible नहीं होती ह�
4:25
मान लो मैं चाहता हूँ कि ये जो तीन हमने आपर लिखी हुई ह�
4:29
लेयर स्टेल में किसके बाद मैं ऐसा कमाड लिखूं कि ऑटोमाटिकली कंपोनेंट लेयर के बाद ही आ जा�
4:34
तो मैं लेयर डिरेक्टिव का इस्तेमाल कर सकता हूं अब लेयर डिरेक्टिव को किस तरह से इस्तेमाल करना यह आ�
4:39
components components
5:00
डॉट कंपोनेंट्स आफ्टर ठीक है और यहाँ पर लिख देता हूँ लेट अ स�
5:08
text align center मैं लिख रहा हूँ इस बात को मान ल�
5:12
बै कुछ ऐसा करता हूँ और यहाँ पर मैं components after ढूनूँ control f
5:16
control f तो यहाँ पर देखो यह 395 लाइन में है ठीक ह�
5:22
और मेरी जो btn है वो कहाँ पर है यह भी देखता हूँ वो 395 में था यह 382 में ह�
5:27
यानि कि मैंने करा क्या बाद में लिखने के बाद भी components वाली layer स�
5:33
पहले मैंने डाल दिया इस चीज़ को यानि कि component layer के बाद डाल दिय�
5:36
basically आप लोग देखो यहाँ पर जो मेरी components layer है यह मेरी components layer ह�
5:41
यह जैसे ही खतम हो रही है यहाँ पर जैसे ही खतम हो रही ह�
5:45
उसके बाद components after आ रहा है लेकिन यह btn है इसको इसने कहा डाला सीधे components के बा�
5:50
तो किस layer के बाद आप लोग डालना चाहते हो layers directive आपको इस बात में मदद करता ह�
5:57
आप जिस भी layer का नाम डालोगे layer के बाद यानि कि at the rate layer के बा�
6:01
वहीं पर आपकी यह जो class है वो पटक दी जाएगी इस case में components के बाद पटक दी ग�
6:07
तो जो tailwind की components layer है उस layer के end मे�
6:11
इसने यह चीज़ चुपका दी तो layer directive क्या करती है simply जो भी आप इसके अंदर डालते ह�
6:15
जिस भी layer के लिए वो उस layer के end में चिपका देती है तो components layer का हिस्सा बन चुका ह�
6:21
अब btn तो btn क्या बन चुका है components layer का हिस्सा बन चुका ह�
6:25
यार मैं इसको ना utilities का हिस्सा बनाना चाता हूँ मैं BTN को एक utility class के तौर पर use करना चाहता हू�
6:31
कभी-कभी होगा क्या कि आप किसी-किसी class को as a utility class बनाना चाहेंग�
6:37
जो कि tailwind में automatically आप लोग को नहीं मिलती है तो उस case में आप लोग क्या करोग�
6:41
उस case में आप लोग layer directive का इस्तेमाल करोगे और कुछ इस तरह से करोगे, अब BTN मेरी utility class है, और यह utility layer के अंदर आती है, अगर मैं आप लोगों यहाँ पर search करके दिखाओ, आपको अगर मैं search करके दिखाओ, तो यह मेरी सारी utility classes के बाद आएगी, अब इसके बाद जो है, कुछ भी नहीं है, यह class class है, और इसका reason यह है, क�
7:14
course enjoy comment
7:26
अब एक चीज थी बहुत सारे लोग पूछ रहे थे या जादूयी trick आपने बताई थ�
7:45
देखो या था क्या कि मैंने एक वायर का टुकड़ा लिया था ये 김�s ब्लैक वायर है मैं वाइट लेता हू�
7:49
ठीक है कहाँ से लाओ मैं वाइट वायर ये है मेरा एयरफोन है इससे मैं करता हू�
7:54
यह मैंने वायर लिया था ठीक है मान लो मैंने यह वायर लिया ठीक है मैंने क्या किया था मैंने कहा था कि मैं इस तरह से फोल्ड करूंगा और मैंने ऐसे डाला था और मैंने यहां से कट कर दिया था और कट करने के बाद कुछ इसको अंदर डाला था और फिर कुछ ऐसे करके �
8:24
ऐसे करके और जो वायर था जैसे ये वायर है ये वायर सुरक्षित यहाँ पर मेरे हाथ में बन था उस टुकड़े को काट के मैंने उस टुकड़े को अपने हाथ में डाल दिया फिर ऐसे करके मैंने ऐसे खेच लिया वो टुकड़ा भी मेरे हाथ में था और मैंने ऐसे करके न�
8:54
तो लो इंस्पेक्ट कर लो नीचे कोई देखना नहीं चाहिए आपका वायर देखना नहीं चाहिए और इस तरह से मैंने मैजिक ट्रिक करी थ�
8:59
कुछ मैजिकियन्स क्या करते हैं कि इसी ट्रिक को इस्तेमाल करते हैं और उनका जो बैकड्रॉप होता ह�
9:04
उनके पीछे जो background होता है वो उस wire के color का ही होता है तब वो ऐसे फैक्टे है टेक्निक स�
9:08
तो उड़ते हुआ वो wire दिखता भी नहीं है क्योंकि उस wire का color और back drop का color same होता ह�
9:12
तो इस तरह से इस trick को perform किया जाता है अगर आप लोग जादूई shows देखते है�
9:17
जो कि बच्चे देखते हैं बच्चे नहीं बड़े भी देख लेते हैं आज कल कभी कभी तो आप लोगों पदा होगा मैं किस बारे में बात कर रहा हू�
9:22
so अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
9:26
and I will see you next time