Up next in 10
Square Bracket Notation in Tailwind CSS _ Tailwind Tutorial #6
54 views
Feb 21, 2024
"Square Bracket Notation in Tailwind CSS: Tailwind Tutorial #6" is a tutorial video that explores the advanced feature of square bracket notation in Tailwind CSS. This notation allows developers to dynamically generate utility classes based on values from their configuration file, enabling more flexible and efficient styling. The video guides viewers through examples and use cases of square bracket notation, demonstrating how it can be utilized to streamline styling tasks and enhance code maintainability. By the end of the tutorial, viewers will have a deeper understanding of this powerful feature and how to leverage it effectively in their Tailwind CSS projects.
View Video Transcript
0:00
Tailwind CSS के अंदर जो classes होती हैं, वो काफी हद तक complete होती हैं, यानि कि अगर आप लोग Tailwind CSS का इस्तेमाल कर रहे हैं, तो there is a high chance कि आप लोग कुछ भी करना चाहते हैं, उसकी class आपको मिल जाएगी, for example, margin top, कितनी भी बड़ी आप देना चाहते हैं, आपको margin top के लिए class मिल जाएगी
0:30
अपने मन से बनाई हुई value, for example, 148 pixels, या 162 pixels, इस तरह की value की margin देनी पड़ सकती है
0:37
padding देनी पड़ सकती है, हो सकता है कि आप एक particular value
0:41
जो कि CSS में use कर पाते, उसको tailwind में miss कर रहे हैं, इस तरह की चीज़ों के लिए होता है square bracket notation
0:47
Tailwind CSS के अंदर आज उसी के बारेAUT आप लोगों को बताऊंगा डिटेल में और आप लोगों को बताऊंगा कि किस तरह से आप लो�
0:53
क्लासेस ऑन द फ्लाई जनरेट कर सकते हैं यानि कि आप 148 पिक्सल वाली क्लास टेल विंड के प्रोडक्शन बंडल के सा�
1:00
कर सकते हैं browser में let's get started और देखते हैं कि यह चीज किस तरह से की जाती ह�
1:05
अगर मैं आप लोगों से कहूंगी मैं आप बनाने वाला हूं नया folder और उसके बाद उसके अंदर जाक�
1:22
मैं VS Code खोलने वाला हूं और उसके बाद यहाँ पर मैं दोबारा से आने वाला हू�
1:26
टेलविंट सीएसस की वेबसाइट पर गेट स्टार्टेड पर ग्लिक करके पोस्ट सीएसस पर ग्लिक करके ये सारे कमांड्स अगर मैं आप लोगों से कहूंगी मैं चलाने वाला हूँ लेकिन उससे भी पहले npm minute minus y तो आप लोग कहोगे कि यार ये बार-बार क्यों करके दि�
2:16
आप लोगों को बहुत फायदा होने वाला है इस चीज का ठीक है विद देट सेट मैं आपको इंडेक्स टोड़ इच्छ�
2:20
अमिल बनाऊंगा ठीक है और देखो कितनी जल्दी मैंने यह सारा का सारा इंस्टॉलेशन किया आप लोगों के लिए ठीक ह�
2:25
और अब इस वीडियो में हम लोग बात करने वाले हैं square bracket notation की
2:30
क्या है square bracket notation, क्यों यूज़ करें square bracket notation, और square bracket notation यूज़ करने के फाइदा है क्या है
2:37
utility classes के आगे क्यों हम कभी-कभी square bracket notation यूज़ करेंगे
2:41
तो ये चीज़ मैं आप लोग को बताऊंगा, तो मैं आपको करूँगा कि आपनी tailwind.config.css में content में star लगा दूँग�
2:48
यह सारी की सारी files को मैं include करना चाहता हूँ मैंने यहाँ पर जल्दी से screencast mode को भी on कर लिया ह�
2:53
ताकि बड़े अराम से अब मैं जो भी लिखूं वो आप लोगों नीचे जो भी की प्रेस करूँ वो दिखें ठीक ह�
2:59
अब यहाँ पर जल्दी से क्या करेंगे हम लोग square bracket notation की documentation में जाएंग�
3:03
square square square ठीक है और स्क्वायर की स्क्वायर बैकेट नोटेशन की डॉक्यूमेंटेशन में जाने के बा�
3:13
मैं आपको बताना चाहता हूं कि क्या करता है पहले बहुत ही बेसिक वे मैं बताता हूं क्या करता है मैं यहा�
3:17
लिखुंगा डिव डॉट MX4 और लिखुंगा बीजी रेड 900 और टेक्स वाइट एक्सवाइट करोगी बहुत ज्यादा डार्क कर दिय�
3:26
है मैंने ठीक है और जो अपना बैकरांड है तो मुझे टेक्स को वाइट करना पड़ेगा अब मैं आप यहां पर क्या करूंग�
3:30
इसको वाइट करने के बाद यहां पर लिखोंगा लॉरेम 23 ठीक है लॉरेम 23 क्या होता है कुछ नहीं होता है लॉरे�
3:38
23 सिंपल सा मैं आप टॉगल वर्ड राप कर लेता हूं ताकि देखिए आपको क्या लिखा हुआ है सिंपल सा कुछ टेक्स्ट होत�
3:45
अब यहाँ पर मैं इसको save करूँगा और जल्दी से live server में खोल लूँगा open with live server
3:49
तो आप लोगों को इस तरह से ही दिखेगा अब यहाँ पर tailwind include हुई ही नहीं और उसका reason की ह�
3:55
कि मैंने यहाँ पर link css करके tailwind को include करा ही नहीं ठीक है तो मैं यहाँ पर link rel is equal to style sheet
4:01
टाइल टॉट सीएसस करूंगा स्टाइल डॉट सीएसस यहां पर दुबारा से लिखूंगा और यहां पर मैं लेकर आऊंगा हमार�
4:10
जो गेट स्टार्टेड के अंदर हमें टेलबिंड सीएसस की लेयर्स दी जाती है वह कॉपी करूंगा यह पर ठीक है और य�
4:30
लोग लापरभाई का नतीजा एनपीएम रन स्टार्ट ठीक है एनपीएम ने स्टार्ट करूंगा अब मेरे लोकल आ�
4:37
थी साउथ पर चल जाएगा यह ठीक है देखो चल गया बढ़िया ठीक है तो यह हमारी टेल में इंट्रूड हो चुक�
4:41
अब अगले वीडियो से मैं क्या करूँगा, ये setup वगैरह ज्यादा नहीं करूँगा, मैं एक template बना लोगा setup की
4:46
और उसके अंदर changes करता जाओगा, ठीक है, तो, तो अभी यहां पर क्या करूंगा मैं लोरेम यह जो लिखा हुआ है इसको एज़ टेंपलेट यूज करोगा एक कम और करूंग�
4:54
मैं यहां पर और इसका राम रख दूंगा टेंपलेट ठीक है इसको मैं कॉपी बेस्ट कर रहा हूं मुझे बता है नो�
5:01
नोट मॉडल को मुझे नहीं करना चाहिए कॉपी पेस्ट इसलिए मैं नोट मॉडल को डिलीट कर दूंगा एंटिएम इंस्टॉल कर लूंगा बाद में अब यहे�
5:07
जो क्या करूंगा थोड़ा बेट करूंगा इसको कॉपी हो जाने देते हैं और इसको रिनेम करके आप नोट बॉडिं�
5:11
खोड़ा हूंगा यार पॉइंट को डाउन इसका नाम रखेंगे टेंपलेट ठीक है इसका नाम रखेंगे टेंपलेट क्योंक�
5:17
आने वाले वीडियो में इसको यूज करना चाहता हूँ और अभी सिक्स वीडियो में तो हमने सेट अप करी लिया है तो अब मैं आपको जल्दी से बात करना चाहूँगा कि किस तरह से स्क्वार बैकेट डोटेशन का इस्तेमाल करना है स्क्वार बैकेट डोटेशन का इस्ते�
5:47
पर जब आप यहां पर एक दो चीजें आप लोगों को बताना चाहूंगा तो इतना सिंपल था स्क्राइब रेकेट नोटेशन अब यहां पर हम लोग करेंगे क्या इसकी डॉक्यूमेंटेशन में आएंगे और यहां पर एक दो चीजें आप लोगों को बताना चाहूंगा त�
6:17
सबसे पहले यह कि अगर आप इसको जिस तरह से यूज कर रहे ह�
6:21
तो आपको आपको करना चाहते हैं कि आप 67 रेम करें तो आप क्या करें? 67 रेम बहुत हो गय�
6:28
3 3 let us say for some weird reason 39 ram affinity
6:40
39 राम की में दे पा रहा हूँ ठीक है तो यह भी मैं कर पा रहा हूँ तो यहाँ पर आप लोग कोई भी यूनिट में वैल्यूस को डाल सकते हो कोई भी यहाँ पर दिक्कत वाली बात नहीं है ठीक है अब इसके बाद यहाँ पर मैं स्क्वायर ब्रैकेट नोटेशन अगर लि�
7:10
और इसके बाद इसके अंदर की जो value है उसको मैं set कर सकता हूँ, फिर इसके बाद यहाँ पर बहुत सारी states वगैरा की बात हो रही है
7:17
states वगैरा मैं आप लोग को आगे बताऊंगा बहुत जल्दी, लेकिन यहाँ पर आप लोग देख सकते हो
7:21
कि किस तरह से आप लोग सारी की सारी classes use कर सकते हो dynamically
7:25
तो कभी भी हमको dynamically कोई भी value use करनी है तो हम इस तरह से करेंग�
7:29
क्या ये चीज width में use की जा सकती है मानलो मैं अगर इसको 30 VW कर दूँ width क�
7:35
तो मैं क्या ये use कर सकता हूँ the answer is definitely yes आप लोग use कर सकते है�
7:39
ठीक है तो मैं जब इस क्वेयर बैकेट का यूज करूंगा तो यहाँ पर मैं डाइनामिकली वैल्यूज को यूज करना चाहता हूँ कि आपको हमेशा इसको इस्तेमाल करना चाहिए दि armed
7:48
know, क्योंकि हम minimize करना चाहते हैं अपनी production bundle को, हम चाहते है�
7:52
कि कम से कम CSS हम ship करें, मैं आप एक चीज दिखाता हूँ यहाँ पर, अगर मै�
7:56
इस पर right लिखर के inspect करूँ, और यहाँ पर मैं आ जाओ elements मे�
8:00
मैं इसको यहाँ पर inspect करता हूँ और यह जो w 30 v w
8:04
लिखा हुआ है मैंने कि styles.css में आज a part of my production मंड�
8:08
add होकर आ गई है ठीक है तो यहाँ पर देखो जितनी मैं classes यूज़ करोगा व�
8:12
मेरे production मंडल में add होके ship हो जाएंगी so I hope कि आप लोग को मज़ा आय�
8:16
ये जान करकी कि इस तरह से square bracket notation को use किया जाता है अभी के लिए इस वीडियो में इतना है guys
8:21
Tailwind CSS की जो playlist है उसको जरूर से access कर लेना and I will see you next time