Up next in 10
When to use @apply and @layer directive__ Tailwind Tutorial #11
50 views
Feb 21, 2024
This Tailwind CSS tutorial covers essential directives like @apply and @layer for styling elements and managing layers in your website design. Perfect for beginners getting comfortable with Tailwind's customization options.
View Video Transcript
0:00
आज मैं आप लोगों को आगे बढ़ने से पहले यह बताना चाहता हूँ कि ज��
0:03
Apply Directive होती है और जो Layer Directive होती है उसको यूज़ करना चाहिए आप लोगों को या नहीं करना चाहि��
0:07
एक बार के लिए ऐसा लगेगा कि यार Apply Directive और Layer Directive क��
0:11
combination अगर आप लोग use करोगे तो ऐसा हो जाएगा कि आर आपकी tailwind application में जो अधूर��
0:17
चीज़ें हैं वो complete हो जाएगी लेकिन मैं आप लोगों को बताता हूँ कि ये जो चीज़ें है ये एक cost क��
0:22
आती है और आपको उस cost को pay करना पड़ता है इस बात को समझना आप लोगों को बहुत जाधर जरूरी ह��
0:27
देखो यार amount of classes हमेशे concern होता है tailwind मे��
0:40
जब आप tailwind css के through websites बनाते हो तो आपके एक एक html elements में इतनी इतनी classes बढ़े जाती ह��
0:46
कि आप भी सोचते हो अरे भाई इतनी सारी classes अब क्या होगा लेकिन मैं आप लोगों को एक बात बताता हू��
0:51
अगर आप लोग इन classes को हटा कर डाल देते हो अपनी style.css के अंद��
0:56
मैं एक folder खोल के आपको दिखाता हूँ जिसमें कि हमने यह काम किया था हमने यह video 10 में यह काम किया थ��
1:02
तो यहाँ पर अगर आप लोग देखो तो हमने basically करा क्या ह��
1:06
कि जो maintainability थी जो कि पहले यहाँ पर थी उसको हमने shift कर दिया है style.css मे��
1:11
अब किसी भी developer को जो कि इस code को maintain कर रहा ह��
1:14
जाना पड़ेगा style.css के अंदर और उसके बाद उसको fix करनी पड़ेगी चीज़��
1:19
और यह intuitive भी नहीं है कि bdn class क्या कर रही ह��
1:23
चलो यहाँ पर तो मैंने class का नाम थोड़ा ढंग से दिया है btn मतलब button
1:26
लेकिन क्या यह class name intuitive है क्या इस class name को देखकर यह पता चलता ह��
1:31
कि यह एक button है यह सारे एक question है अभी भी लगेगा कि सारी इतनी सारी classes को ले चल��
1:37
style.css के अंदर लेकिन ऐसा करना मत क्योंकि जब आप ऐसा करते हो तो आप कर कर रहे हो maintainability को shift कर रहे हो बस से ज़्यादा कुछ नहीं कर रहे ह��
1:44
लेकिन आप लोगों को ऐसा करना चाहिए जब आप लोगों को लगता है कि कुछ class combinations को आप बार बार use कर रहे ह��
1:49
case BTN text white bg red 600 rounded excel px2 py1 text sm BTN
2:26
वो थोड़ा से जादा rounded हो गया है उसको थोड़ा कम rounded करना चाहता हू��
2:29
मान लो आपको ऐसा लगता है ठीक है तब क्या होगा आप आओगे वापस और आप देखोग��
2:34
एक btn class अपने इस tailwind project में आपको गया बीटियन में क्या डाला था मैंन��
2:40
मैंने border कितना डाला था मैंने radius border की कितनी डाली थी मैंने color क्या डाला था border क��
2:45
क्या मैंने इसमें कोई background color hover करके define किया था या नहीं किया थ��
2:50
ये देखने के लिए सिर्फ आपको या तो अपनी website पर या style.css में बार बार जाना पड़ेग��
2:55
तो यहाँ पर जो बात मैंने भी बोली थी कि this maintainability comes at a cost
3:00
वो चीज मैंने आप लोगों सिद्ध करके दे दी ठीक है तो जब आप reuse करना जाते हो components क��
3:05
जब आपको लगता है कि यह एक button है और यह मेरी website में कम से कम 10-20 जगा पर रहने वाला ह��
3:10
या कम से कम 6 जगा पर तो रहने वाला ही है और future में रहने वाला है अगर अभी नहीं है त��
3:14
क्योंकि यह एक button है यह मेरी website का ऐसा button है जो कि मैं बार बार इस्तेमाल करूँग��
3:19
तो मैं इसलिए median को हटा कर style.css के अंदर डाल दूँग��
3:23
लेकिन अगर कोई ऐसी चीज़ है जिसको सिर्फ मैं एक बार यूज़ कर रहा हूँ मैं इसको कभी नहीं लेकर रहूँगा style.css के अंद��
3:28
मैं कभी layer directive का और apply directive का इस्तेमाल नहीं करूँग��
3:33
ठीक है तो ये चीज़ आप लोगों के दिमाग में जो है रहनी चाहिए amount of classes
3:37
हमेशा concern रहता है tailwind में आपकी html यकीन वानो बहुत बड़ी होने वाली है number of classes
3:43
की वज़े से लेकिन एक बात मैं आपको बताता हूँ personal experience ह��
3:47
आपके पास यह extension है जिसका नाम है tailwind css intelligence ठीक है यह extension
3:53
आपका इतना बड़ा साथ देती है जब आप tailwind CSS project develop component component classes tailwind buttons v1 example latest example
4:27
बिला रखी है, anyways, tailwind CSS एक ऐसी चीज़ है ना, कि अगर आपको tailwind की classes
4:31
नहीं पता क्या होती है, तो आप लोग देखोगे अरे इतनी सारी classes और आप शायद बेहोश हो जा��
4:37
ऐसे, लेकिन नहीं, आपको ऐसा नहीं होना है ठीक है, ऐसा नहीं होना है आपको, आ��
4:41
अगर दिहान से अपना दिमाग लगा कर देखो के इन classes को, देखो, type is equal to button, ठीक है
4:46
class is equal to py2, py2 मुझे बता रहा है कि padding y2 है
4:50
फिर इसके बाद mr2 मुझे बता रहा है, margin right 2 है, px4 बता रहा है
4:54
padding x-axis में 4 है, और कितनी है 1 rem की padding है, मैं hover करके पता लगा सकता हू��
4:59
फिर font medium है यानि font weight 500 है text gray 900
5:03
यह वाली CSS लगा रहा है bg wide यह वाली CSS लगा रहा है rounded full यह वाली CSS लगा रहा ह��
5:08
अलग हो क्या रहा है ना कि मुझे कोई CSS फाइल खोल के देखने की जरूरत नहीं ह��
5:12
वना क्या होता है traditionally जब हम coding करते हैं तो classes होती हैं उन classes को decode करके देखो बार बा��
5:18
जा जा कर देखो अपनी CSS में कि कौन सी class क्या property
5:21
दे रही है एक HTML element को फिर अगर change कर रहा है तो उस CSS के अंदर जाओ कोई आपने अगर vendor के दुआरा प्रदान क��
5:28
गई CSS यूज़ करी है तो वहाँ पर देखो कोई property ऐसी तो नहीं है जिसको आ��
5:32
override नहीं कर पा रहे हो या अगर आप किसी property को override करना चाहते हो तो कौन सी CSS उबर कौन सी नीचे तो वो tension ही चली जाती है utility
5:39
classes नहीं है सब element में utility classes डालो और आपका काम जो ह��
5:42
बन जाता है तो कुल मिला कर यहाँ पर मैं कुछ कैवियाट्स के बारे में बाताना चाहता था आप लोगों क��
5:46
पहली चीज़ तो यह है कि कोई लेर डिरेक्टिव और अपलाई डिरेक्टिव जादू नहीं ह��
5:50
आप जब भी ऐसा कर रहे हो तो मेंटिनेबिलिटी को कहीं और लेकर जा रहे ह��
5:54
और उसी के साथ साथ आपको apply directive layer directive
6:08
और जब भी आप apply directive और layer directive का इस्तेमाल कर रहे हो तो आप लोग अपनी class names बहुत ही wisely choose करना ह��
6:13
जैसे यह मैंने करें btn btn यहाँ पे बता रहा है कि यह एक button है और इस website की पहचान अगर यह button ह��
6:20
तो यह button बाद बाद use होगा इस website में अगर इस website का ही button है य��
6:24
तो maybe इस button के sizes को मैं change करूँ btn primary, btn secondary के classes बना��
6:29
कि इस बटन को change करें, लेकिन कभी भी मैं यहाँ पर हर चीज को change नहीं करूँगा
6:35
BTN 1, BTN 2, BTN 3, मैंने देखा है कुछ लोग over चले जाते हैं, BTN 1, BTN 4, BTN 8, अब सारी maintainability यह style load CSS में डाल देते हैं
6:43
अगर आप लोग ऐसा करोगे ना style.css आपकी बहुत बड़ी हो जाएगी फाइदा क्या रहेगा या टेलविन चीज़स को यूज़ करने का जब आप आओगे बार बर style.css मे��
6:50
और आप यहाँ पर यह सारी classes ही देखे जाओगे कि इस class में क्या है इस class में क्या ह��
6:55
अब मैं यह नहीं कह रहा हूँ कि आप लोग को layer directive और apply directive का इस्तेमाल नहीं कर रहा है मैं जब आप लोग को एक fair warning देना चाहता था कि जब आप इसका हज से ज़ादा use करोग��
7:02
तो यह अच्छा नहीं रहेगा कुछ caveats के साथ आता है maintainability style और CSS में चली जाती ह��
7:07
I hope कि आप लोगों यहाँ पर यह चीज समझ में आ रही है कि जब भी आप यहाँ पर कोई class
7:13
as equal to डाल के maintain liberty या shift करते हो तो आपको वो चीज करनी पड़ती ह��
7:17
जो कि आपको traditional workflow में करनी पड़ेगी कि आपको इस class का name देखक��
7:21
और यहाँ पर वापस आना पड़ता है और देखना पड़ता है कि यह glass में कौन-कौन सी utility glasses applied ह��
7:27
so with that said हम लोग आगे बढ़ेंगे I hope कि आप लोग समझ गए कि मैं आपको क्या कहना चाहता थ��
7:32
आपको क्या समझाना चाहता था इस playlist को अगर आप लोगों ने access नहीं किया तो इसको जरूर access करे��
7:37
अभी के अभी इसको bookmark करें यहां click करके और यहां click करके save करें thank you so much guys for watching this video and I will see you next time
8:03
करते है��