Up next in 10
Why use Tailwind CSS_ _ Tailwind Tutorial #3
288 views
Feb 21, 2024
"Why Use Tailwind CSS: Tailwind Tutorial #3" is a tutorial video aimed at developers seeking to understand the advantages and benefits of using Tailwind CSS in their projects. The video highlights the unique features and advantages of Tailwind CSS, such as its utility-first approach, which offers granular control over styling without the need to write custom CSS. Additionally, the tutorial explores how Tailwind CSS can streamline the development process, improve code maintainability, and enhance collaboration within teams. By the end of the video, viewers gain insights into why Tailwind CSS is a valuable tool for modern web development and how it can empower developers to create responsive, visually appealing websites efficiently.
View Video Transcript
0:00
So far हम लोगों ने Play CDN का इस्तेमाल करा थ�
0:02
और Tailwind CSS को बड़े आराम से हम लोग इस्तेमाल तो कर पा रहे थे कोई भी दिक्कत हमको ऐसी लग नहीं रही थी कि यार ये problematic हो सकता ह�
0:09
Tailwind यूज़ करते वक्त लेकिन place edn को production में आप लोग इस्तेमाल नहीं कर सकत�
0:13
place edn को development के time पर आप ज़रूर इस्तेमाल कर सकते ह�
0:17
आज के इस वीडियो में मैं आप लोगों को बताऊंगा कि tailwind CSS को आप क्यों इस्तेमाल करते है�
0:21
क्योंकि बहुत सारे सवाल आप लोगों के दिमाग में हो सकते हैं अगर हम लोग इस्तेमाल करेंगे तो क्या problem नहीं होगी क्या इतनी सारी classes को अगर हम browser प�
0:45
shift करेंगे तो browser में जो shift किया जा रहा है production bundle उसका size बहुत ज्यादा तो नहीं बढ�
0:50
जाएगा ऐसा बिलकुल भी नहीं होगा हर चीज का solution होता है tailwind css के पास आज के इस video में आपक�
1:10
अजय को तो वाइट इस टेल में इस प्रोडक्शन सेटअप किस तरह से करना है यानि कि अगर आप लोग प्लेस इडियम क�
1:25
इस्तेमाल नहीं करना चाहते हैं तो वह क्या स्टेप्स होंगे जो कि आप लोग फॉलो करेंगे इन सब चीजो�
1:30
बात करूंगा तो सबसे पहले तो टेलविंट की इसको यूज करने का पहला फायदा यह है कि आप लोग बार-बा�
1:36
क्लासेस को रिवेंड नहीं करते और इस चीज का मतलब मैं आप लोगों यहां पर बताता हूं क्या है तो यह जब भ�
1:40
आप लोग एक traditional CSS की साहिता से website बनाते हो तो होता क्या है कि आप लोग CSS के अंदर classes के नाम जो है add करते हो और वो classes अपकी HTML में भी use करते ह�
1:51
for example अगर आप लोग एक sidebar बना रहे हो सो सकते हैं कि आप लोग sidebar के नाम के class बनाओ हो सकता है आप लोग sidebar dash para के नाम के class बनाओ and so on
2:00
तो जब इस तरह की काम आप लोग करोगे तो एक सबसे बड़ी चीज जो है वो ह�
2:05
आप लोग को सोचना पड़ेगा यार इस class को क्या नाम दू क्या इस class को मैं reuse करूँ या ना करू�
2:11
और अगर आप किसी class को reuse कर रहे हैं तो कब change करके क्या चीज बिगड़े ये आपको नहीं मालूम होता ह�
2:16
your CSS doesn't grow with your HTML and designs अगर आप लोग Tailwind CSS use करते ह�
2:20
तो आप लोग utility first designs जो है जो classes है आपकी वो इस्तेमाल करते ह�
2:25
और जब आप utility first approach के साथ जाते हो तो एक सबसे बड़ा फाइदा ये होता ह�
2:29
कि आपके components independent हो जाते हैं जो navbar आपने tailwind css से एक page में बनाया ह�
2:34
उसका दूसरे page के navbar से कोई मतलब नहीं रहता है अगर आप लोग utility classes यूज़ कर रहे ह�
2:39
आप लोग एक particular navbar की utility class change करके या फिर अगर आप लोग header footer में same scheme रख रहे ह�
2:45
अगर आप अपनी जो CSS वाली HTML लिखते हो अनिकी वो HTML जिसमें आपने CSS फाइल्स बनाई ह�
2:52
अगर आप लोग वो लिखते हो तो हो सकता है कि आपने header footer में same class का इस्तेमाल किया ह�
2:57
आपने change करी header के लिए change हो गया आपका footer और यह हो जाती है frustrating ची�
3:01
तो ये चीज नहीं होती है टेल्बिंट CSS में when you make a change no risk of breaking existing templates
3:07
यानि कि existing templates को खराब करने का risk जो है काफी हद तक minimize हो जाता ह�
3:13
मानलो मैं एक HTML लिख रहा हूँ मैंने एक class डाली अपनी sidebar मे�
3:18
और दूसरी class मैंने डाली अपने about page के एक right side के चोटे से sidebar मे�
3:23
और दोनों का राम मैंने sidebar रख दिया, दोनों का background red है, sidebar green sidebar red class sidebar you got the point utility first approach classes change
3:38
component को change होता हुआ देखते हो, और एक काफी अच्छा experience होता है, जब आप development कर रहे हो तो
3:42
if you try to build the site from the last video using pure CSS
3:46
you will get a lot of questions के answers अब कुल में लाके मैं याबर गया कहना चाहता हू�
3:51
मैं यह कह रहा हूँ कि यार हमने last video में एक website बनाई थी एक landing page बनाया थ�
3:56
मैं चाहता हूँ कि आप वो landing page खुद से बना कर देखो मैं चाहता हूँ आप वो learning page बना कर देख�
4:01
using CSS आप HTML CSS files का इस्तिमाल करो और उसको बना कर देखो आपको पता चलेग�
4:06
कि Tailwind CSS का क्या role है क्या Tailwind CSS का कुछ महत्व भी है की नहीं ह�
4:11
आप लोगों काफी हद तक ये चीज़ पता चलेगी तो आप लोग एक बार try जरूर करना pure CSS से classes डाल कर HTML tags में CSS डाल कर आपको आपके कई सवालों को जवाब मिल जाएंग�
4:22
अब यहाँ पर कुछ सवाल जुकी आपके दिमाग में शायद से आय होंगे और आने भी चाहिए क्या यह आपकी site को slow बना देग�
4:28
क्योंकि यार देखो इतनी सारी classes हैं, MT2 है, MX2 है, MY2 है
4:33
बहुत सारी classes हैं, Font Bold, और Flexbox को related इतनी सारी classes हैं
4:38
अगर आपने Flexbox का इस्तेमाली नहीं किया है अपने page में, तो क्या ये Flexbox की जो classes हैं, ये सारी आपके production bundle में ship की जाएंगी
4:45
तो ये सारी की सारी चीज़े मैं आपको बताता हूँ सबसे बड़े ये आपकी साइट को स्लोन नहीं करेग�
4:49
क्योंकि आज की तारिक में अगर आपने प्रोड़क्शन सेटअप सही से कर ले हैं टेलविंट CSS क�
4:53
तो सिर्फ वो क्लासेज शिप करी जाएंगी browser पे, client के browser प�
4:57
सिर्फ वो classes भेजी जाएंगी जिनका actual में page में इस्तेमाल किया गया ह�
5:01
और तो और अगर आप लोग javascript में भी इस्तेमाल कर रहे हो कुछ classes क�
5:05
तो वो भी जो है ये देख लेगा और उनको भी add कर लेगा, तो आपक�
5:11
production bundle का size के increase होगा unnecessarily, बहुत ज़्यादा margin से
5:15
इसका जबाबे नहीं, जो classes आपने use करी हैं, वो classes आपकी client को ship की जाएंगी
5:21
जिसका मतलब की यह है, कि अब आपको tension लेने की यहाँ पर ज़रूरत नहीं है, कि इतना बड़ा production bundle मेरा ना हो जाए
5:26
कि मेरी जो site है, वही slow हो जाए, tailwind CSS use करने के चकर में नहीं
5:30
4 classes use करी हैं, तो 4 classes shift की जाएंगी, और अगर 5 use की हैं, तो 5 की जाएंगी
5:35
अगर 10 आपने use की हैं, तो 10 classes shift की जाएंगी, तो I hope you got the point
5:40
अब what about responsiveness, बहुत सावाल पूछते हैं लोग की, responsiveness क्या रहीगी मेरी site में
5:45
क्या मेरी site responsive रहेगी, तो हाँ, या तेलमिन के अंदर break points दिये गए हैं
5:50
आप लोग particular break point पर, CSS change कर सकते हैं, और ये कैसे करना है
5:55
ये मैं आप लोग को बताऊँगा, किस तरह से आप अलग-अलग classes, अलग-अलग devices के लिए add कर सकते हो
6:00
same element में, ये मैं आप लोगों को बताऊँगा तो ये सब देखेंगे आने वाले वीडियोज मे�
6:05
और इसके बाद एक और सवाल जो बहुत साइड लोग पूछते हैं वो ये पूछते है�
6:09
कि यार क्या ये सेम नहीं हो गया क्या ये वाई बात नहीं हो गयी कि यार हम लो�
6:13
inline CSS लिख ले, inline CSS भी तो लिख सकते हैं, यह classes add करने क�
6:17
क्या game खेला जा रहा है, तो classes add करने का game, inline CSS की game स�
6:21
totally different है, let me tell you जब आप tailwind CSS की utility first
6:25
classes यूज़ करते हैं, तो यह utility classes design करी गई है, अच्छ�
6:29
websites बनाने के लिए, अगर MX 2 आप लोग डालते हो, और MX
6:32
4 डालते हो तो इस जो difference है sizing में margin की व�
6:37
difference काफी चीजों को काफी factors को मद्दे नज़र रखते हुए लिया गया है उसे के साथ साथ अगर हम लो�
6:43
बात करें अलग अलग devices में आपकी अलग अलग utility फर्स्ट लासेज अगर आप लोग add करते हैं त�
6:48
जो break points हैं वो काफी सोच समझ के बनाए गए हैं और ये जो utility
6:52
फर्स्ट लासेज ने design की गई है ये आपके overall design क�
6:56
बहुत ज़दा consistent रखने वाली है use inline CSS 144 pixels 132 pixels inline CSS time pain inline 144 132
7:29
नहीं उठा पाएंगे, तो यहाँ पर अगर आप लोगों को इसको और घहराई से समझना है क�
7:33
क्यों utility first classes better है हमारी inline CSS से तो आप लोग बना कर देख ल�
7:39
यार, एक page बना कर देख लो छोटा सा inline CSS का इस्तेमाल करके आपको आपक�
7:43
सवालों को जवाब मिल जाएगा ठीक है तो यह हो गया वाय उस टेलमेंट सीएसस और भी बहुत सार�
7:47
रीजन्स है टेलमेंट सीएसस को यूज़ करने के और वो आप लोगों को थ्रॉट दो कोट्स मिल जाएगा बट य�
7:52
मुख्य कारण थे हम लोग Tailwind CSS क्यों यूज़ करें ठीक है अब यहाँ पर एक बहुत बड़ा सवाल जो कि आप मेंसे कई लोगों के दिमाग में होगा कि किस तरह से Tailwind CSS को Production के लिए Setup करना है जो आपकी Screen पर अभी मैंने Steps दे रखी हैं आप इस Particular Video को Bookmark कर लो या फिर आप ल�
8:22
की चीज है और मज़ा आ जाता है आप लोग simply add कर सकते हो classes और एकदम कमाल का चलता ह�
8:27
लेकिन जब आप लोग एक बड़े project पर काम कर रहे हो तो आपको एक node.js project जो है initialize
8:32
करना पड़ेगा अब यहाँ पर देखो मैंने यहाँ पर लिखा हुआ है to setup tailwind CSS run these
8:36
commands यह सारे commands आपको run करने tailwind css project को setup करने के लि�
8:41
सबसे पहले एक directory के अंदर जाना है आपको npm init minus y लिखना है यह क्या करेग�
8:46
initialize कर देगा उस directory को as a node js project अब इसके बाद आपको npm install
8:51
minus d यह सारे का सारे packages install करने tailwind css post css auto prefixer और उसक�
8:58
जो कि हमें एक सर्वर स्टार्ट करने में मदद करेगा ये सारे पैकेजेस इंस्टॉल करने है इसके बाद आपक�
9:03
एंपी एक्स टेलविंड सीसेस एनेट माइनस पी ये कमांड रन करना है और इससे आपकी जो है टेलविंड सीसेस क�
9:09
configuration file generate हो जाएगी फिर आपको एक input.css file बनानी ह�
9:12
और उसमें ये तीन entries add करनी है ये पूरा add the rate से लेके semi colon तक नीचे वाल�
9:18
आपको पूरा का पूरा copy करना है इसके बाद आपको obtain tailwind की जो config file हमार�
9:22
generate हुई थी उसके अंदर content empty को change करके content star
9:27
चेंज करना है इसके बाद आपको start beat को चेंज करना है package.json की script
9:31
section के अंदर और इसके बाद आपको npm run start command चला देना है ये सारे क�
9:36
सारी चीज़े मैं आप लोगों को बताऊंगा देखकर लेकिन अभी के लिए आप क्या करो इस पेज का स्क्रीन शॉट जरूर ले लो यार क्योंकि अगर आपने इस पेज का स्क्रीन शॉट नहीं लिया है तो फ्यूचर में आपको जरूर काम आने वाला है जब आप अपने टेल विंड सीसस का प्रोजेक्ट जो है सेट अप करोगे तो इसका स्क्रीन शॉट जरूर ल�
10:09
पर इसका बात मैं क्या करूंगा सबसे पहले तो एक इंडिक्स टोट हटीएमल बनाऊंगा ठीक है और इंडिक्स टोट हटीएम�
10:14
बनाने के बाद यह मान लो मैं अपना टेलविंड आफ टेलविंड सीएसस प्रोजेक्ट जो सेट अप करना चाहता हूं ठीक ह�
10:21
तो मैं यहाँ पर आप लोगों को बताता हूँ जल्दी से क्या क्या करना है आपको आपको सबसे पहले तो क्या करना है npm
10:27
let minus y run करना है इससे क्या होगा कि package generate package generate command run copy
10:42
तो मैं वो जो command मैंने आप लोगों को दिया था, packages install करने के
10:46
वो मैं आप लोगों को दे देता हूँ, और यहाँ पर देखो, npm install-d, tailwind css
10:50
post css, auto prefixer, और wheat, अब यह मैं कहां से लाया, अब जो tailwind की website है
10:56
उसमें अगर आप लोग setup वाले section में जाओगे, इनिट माइनस पी यानि कि आपक�
11:14
tailwind CSS की con file generate करनी है और post CSS की con file generate करनी ह�
11:18
तो यह दोनों files generate हो गई इसके बाद content में मैं star लगा दूँगा जिसे मैंने आप लोगों बताया थ�
11:22
ठीक है मतलब कि सारी की सारी files में मैं tailwind CSS की classes यूज़ करना चाता हू�
11:26
इसके बाद मैं input.css यहाँ पर लगाऊँगा और इस input.css को include कर लूँगा अपनी HTML के अंद�
11:32
तो यहाँ पर हम लोग link.css यहाँ पर use करेंगे और यहाँ पर आप लोग देखो मैं क्या करूँग�
11:39
यह जो हमारा CSS file है इसके content को मैं यहाँ पर ले आऊँगा ठीक ह�
11:56
तो मैं एनपीएम रन स्टार्ट जैसे ही करूंगा आप लोग देखो यहाँ पर एक localhost 3000 पर मेर�
12:01
यहाँ पर यह जनरेट हो गया, मैं आपको एक चीज दिखाता हूँ यहाँ पर ठीक है मैं क्या करूँगा, अपने index.html के अंदर एक div बनाऊंग�
12:08
और मैं यहाँ पर लिखूंगा bg red 500 और इसके बाद मैं lorem 23 लिखूंग�
12:14
और इसके बाद मैं यहाँ पर लिखूंगा div.bg purple 900 और यहाँ पर मैं लिखूंगा this मान ल�
12:23
और इसके बाद मैं यहाँ पर मान लो mx mx2 लिख रहा हूँ ठीक ह�
12:27
और मैंने यहाँ पर classes 3 use करी हैं, bg purple है, 900, mx2 bg red 500
12:32
ठीक है, यह आपने देख लिया अभी, और यह काम भी कर रही है, मस्त काम कर रही है एकदम, ठीक है
12:36
मैं text white भी लगा देता हूँ यहाँ पर, ताकि आप लोगों को दिखा दू, कि ये काम कर रहा है सब कुछ हमारा मस्त एकद�
12:41
ठीक है बढ़िये चल रहा है सब देखो बाईट हो गया text अब एक चीज देखो यहाँ पर कमाल देख�
12:45
MX2 भी लग गया है इस पर मैं right click करके inspect करूँगा ठीक ह�
12:49
right click करके मैं क्या करूँगा inspect करूँगा और आइडली करके इंस्पेक्ट करने के बा�
12:53
मैं जैसे ही इसकी CSS में जाओंगा input.css में यह देखो input.css के अंदर सिर्फ वो files है�
13:00
sorry सिर्फ वो classes हैं जो कि मैंने use करी हैं यह देख�
13:03
आपको इसमें MX3 नहीं मिलेगी आप Ctrl X करके देख लो MX3 में नहीं use करी है तो MX3 नहीं मिलेग�
13:08
लेकिन इसमें MX2 आपको मिल जाएगी यहाँ पर देखो ही मिल गई MX2 MX2 इसलिए मिली क्योंकि MX2 मैंने use करी ह�
13:14
the moment मैं यहाँ पर MX3 use कर लूँ मारलो मैंने यहाँ पर MX3 use करी ह�
13:18
तो dynamically यह input.css जो है post CSS की साहिता से इसमें change हो जाएगी और मुझे MX3 यहाँ पर मिल जाएग�
13:25
देख रहो हो आप लोग यहाँ पर सिर्फ वो classes add हो रही है जो कि मैंने use करी है और यही beauty है Tailwind CSS क�
13:30
ठीक है so I hope कि आप लोगों मज़ा आया समझ में आ गया किस तरह स�
13:34
यह steps follow करनी है और मैंने जो steps का screenshot आपको लेने को बोला थ�
13:39
वो आशा करता हूँ सबने ले लिया होगा so I hope कि आप लोगों को मज़ा आ रहा ह�
13:42
आने वाले वीडियोस में और concepts को explore करेंगे tailwind CSS के अभी के लिए इस वीडियो में इतना है guys
13:47
thank you so much guys for watching this video and I will see you next time
14:06
करते है�
#Skins
# Themes & Wallpapers