Up next in 10
Hover, Focus & Other States in Tailwind CSS _ Tailwind Tutorial #8
623 views
Feb 21, 2024
"Hover, Focus & Other States in Tailwind CSS: Tailwind Tutorial #8" is a tutorial video that delves into the functionality of hover, focus, and other states within the Tailwind CSS framework. The video demonstrates how developers can utilize Tailwind's utility classes to apply different styles to elements based on user interactions such as hovering, focusing, and more. Viewers will learn practical techniques for enhancing user experience and adding interactivity to their web projects using Tailwind CSS. By the end of the tutorial, developers will have a comprehensive understanding of how to implement state-based styling effectively in Tailwind CSS.
View Video Transcript
0:00
कभी कभी हम लोग चाहते हैं की अगर हम किसी element पर hover करे तो colour
0:03
change हो जाए button का या फिर अगर हम किसी भी एक particular list
0:07
item पर navigation bar के अंदर list item पर hover करे तो उसका colour fade
0:11
हो जाए या dark हो जाए ताकि user को प्रतीत हो की actual में
0:14
कुछ हो रहा है। Website में इस तरह से हरकत होती हुई दिखती है तो user
0:18
experience बहुत होता है। Til wind CSS की सहायता से ये सारी की
0:21
जा सकती हैं और आराम से utility classes को add करके की जा सकती है
0:25
आज के इस video में हम लोग देखेंगे की किस तरह से हुआ state को focus
0:29
state को और भी बहुत सारी states होती हैं उनको किस तरह से tailwind
0:33
CSS में आप लोग use कर सकते हो। चलते हैं computer screen
0:36
पर और देखते हैं कि ये किस तरह से जादूक किया जाता है। वापस
0:50
अपनी computer screen के अंदर और आज हम लोग यहाँ पर देखने वाले हैं hover
0:54
focus और other states को। अब यहाँ पर एक आप लोगों को बताता हूँ कि
0:58
जैसे कि आप लोग tail wind के अंदर classes लगाकर अपने button
1:02
को style कर सकते हो। आपको पता है कि आप background style कर सकते हो। आप किसी
1:05
भी element पर hover करने के बाद यानि कि अपने mouse di को ले जाने के बाद
1:10
कुछ हरकत करवा सकते हो। अब मैं बताता हूँ ये किस तरह से दिखेगा। अगर
1:13
मैं एक website पर जाता हूँ मैं एक बहुत ही random सी website चुन रहा हूँ stray dot I
1:17
क्योंकि मेरे दिमाग में भी कुछ और नहीं आ रहा है। अब देखो जैसे ही मैं mouse arrow यहाँ पर लेकर जा रहा हूँ। अब
1:21
देखो button का colour change हो रहा है, size change हो रहा है, ये सारी चीजें change हो रही है। जैसे
1:25
ही मैं अपना arrow लेकर जाता हूँ इन इस button के पास तो ये कैसे
1:28
करनी है, किस तरह से hover करने पर किस तरह से अपने mouse arrow
1:32
को ले जाने पर इस पर आप कुछ और classes add कर सकते हैं tailment के। तो
1:36
इस को दिखाने के लिए मैं क्या करूंगा जल्दी से अपनी template को copy करूँगा और
1:40
मैं यहाँ पर लिखूंगा tail wind tutorial eight ठीक है tail wind
1:45
tutorial eight और यहां पर tail wind tutorialate करने के बाद मैं
1:49
जल्दी से खोल लूँगा इसको code के अंदर और NPMI लिख दूंगा
1:54
बस NPMI इतना है। इससे सब कुछ हो जाएगा। ठीक है? और
1:58
NPM run start लिख दूंगा। क्या लिखूंगा NPM run। Start इतना है
2:03
बस ठीक है। और इसके बाद क्या करूँगा local host three thousand को खोल लूंगा
2:07
और यहां पर देखो मेरी ये जो template है वो आ चुकी है। मैं यहां पर क्या करूँगा जो index dot HTML
2:11
के अंदर ये जो dim लगा हुआ है ना, मैं इसको हटा दूंगा यहां से। ठीक है? और मैं करूँगा
2:14
क्या कि यहां पर एक button लिखूंगा। ठीक है एक button बनाऊंगा
2:19
और यहां पर button के अंदर एक class दे दूंगा BTN ठीक है? BTN नहीं दूंगा
2:23
मैं just class वाला जो attribute है ये लाना चाहता था ये मैं type नहीं करना चाहता
2:27
था manually इसलिए मैंने dot BTN लिखा। अब देखो मैं यहाँ पर क्या करूँगा
2:31
class is equal to मैंने यहाँ पर double quotes double quotes लिख दिए और
2:34
ये करने के बाद मैं क्या करूँगा मान लो मैं इस इसको padding
2:38
देना चाहता हूं PX four। मान लो मैं P two देना चाहता
2:42
हूँ। मान लो मैं इसको BG ah purple देना चाहता हूँ मान
2:46
लो और purple आठ सौ देना चाहता हूँ। text में इसको white
2:50
देना चाहता हूँ। और ये button को जिस तरह से दिख रहा है देख सकते हो आप लोग। text
2:53
white मैंने इसके अंदर कोई text लिखा नहीं है। submit now। ठीक
2:59
है? मैं यहां पर इस तरह से इसको लिख रहा हूं देख सकते हो आप submit now काफी हो
3:03
गया है ये button तो मैं क्या करूंगा इसके size को सा कम करूंगा और
3:06
मैं यहां पर लिख दूंगा text SM ठीक है। इसके text को
3:11
small कर दूंगा और यहां पर लगता है मैंने zoom कर रखा है इसका text तो ठीक
3:14
है मैंने zoom कर रखा था। ठीक है। अभी यहां पर आप देख सकते हो submit now ये button
3:18
इस तरह से आ गया और मैं एक काम और करूंगा इसको एक div के अंदर डाल दूंगा
3:22
जिसमें मैं एक बहुत ही ridiculously high margin दूंगा twenty two की
3:26
और M twenty two कर दूंगा इसको मैं यानि कि x और y दोनों में twenty two
3:29
मैं देखता हूं ये class tail wind में है कि नहीं लगता है class tail wind में होती
3:33
नहीं है M twenty two। मैं यहां पर MX twenty two खोज
3:37
रहा हूँ वो भी नहीं है। देखता हूँ यार क्या यहाँ पर MX
3:41
thirty six है ठीक है? क्या M thirty six होता है कुछ tail wind के अंदर हाँ होता है
3:44
ठीक है। Cool। अब यहाँ पर आप लोग देख सकते हो कि यहाँ पर कुछ इस तरह से
3:48
आ गया M thirty six करने के बाद और मैं क्या करूँगा
3:52
कुछ इस तरह से इसको ऐसे dip में डाल दूँगा और ये button मेरा यहाँ पर आ गया। अब
3:55
देखो मैं क्या खेल करूँगा इसके साथ। circus देखना क्या करूँगा मैं by the way
3:59
circus से याद आया कि मैंने पिछले video में आप लोगों को एक जादू दिखाया यार comment
4:02
में लोगों ने किसी ने कुछ लिखा, किसी ने कुछ लिखा कि यार आपने ये कर दिया, आपने वो कर दिया
4:06
कोई कह रहा है कि आपने edit कर दिया video कोई कह रहा है कि आपने ऊपर फेंक दिया
4:10
तार और दूसरा तार ले आए नीचे से पता नहीं क्या क्या लिखा हुआ है लोगों ने। बहुत ही simple
4:14
सी trick है आप लोगों को बताऊंगा इस video के बीच में। अभी यहाँ पर button को style कर लेते हैं
4:17
ठीक है। मैं क्या करूँगा कि rounded लिख दूँगा कुछ इस तरह
4:21
से मान लो मैं rounded MD लिखता हूँ और rounded MD लिखने के बाद आप देखो यहाँ पर कुछ
4:25
इस तरह से मतलब देख रहे हो कितना button ये button बना दिया हमने in fraction
4:29
of a second में, fraction of a second में तो नहीं बनाया, fraction of a minute में। ठीक है? और
4:34
fraction of a minute में इतना हमने button बना दिया लेकिन अब मैं चाहता हूँ कि यार जैसे
4:37
ही इस पर hover किया जाए, यानी कि hover colon। मैं चाहता हूं
4:41
कि इसका जो background है वो change होकर सा कुछ इस तरह
4:45
से हो जाए। ठीक है? तो मैं अब अपना arrow लेकर जाऊँगा यहां पर देखो इसका
4:49
background कुछ इस तरह से change हो रहा है। लेकिन इतना change हम नहीं चाहते। हम चाहते हैं
4:53
कि purple आठ सौ से purple नौ सौ हो जाए। तो मैं यहाँ पर इसको
4:56
BG Purple लिख दूंगा, purple छह सौ हो जाए। मैं जल्दी से
5:00
यहाँ पर screencast mode और word wrap को toggle कर लूँगा। ठीक
5:04
है। मैंने दोनों को toggle कर लिया है। हाँ ठीक दिख रहा है। अब
5:07
देखो मैं अपना mouse arrow लेकर जा रहा हूँ तो ये इस तरह से सी हरकत हो रही है। और अच्छा
5:11
रहेगा अगर मैं इसको सात सौ ही कर दूँ तो ज्यादा change मैं नहीं रखना चाहूंगा। देखो
5:15
मैं यहाँ पर mouse arrow लेकर जा रहा हूँ तो ये कुछ इस तरह से मैं इसकी
5:19
आह इसके background को change कर सकता हूँ। जैसे ही हम homework state में enter
5:23
करते हैं तो अब यहां पर अगर मैं tab दबाऊंगा आप लोग देख रहे हो मैं जैसे tab
5:26
दबाऊंगा ये focus में आ गया button देख रहे हो ये black colour का border आ गया है यहाँ पर देख
5:30
रहे हो अभी नहीं दिख रहा, अब दिख रहा होगा। अब मैं tab दबाऊंगा ये focus
5:34
से हट चूका है button। By the way मैं यहां पर जल्दी से आप लोगों को एक बहुत ही
5:38
quick बताना चाहता हूँ जो कि बहुत ज्यादा important है। और मैं
5:41
उसके लिए आप लोगों को लेकर चलना चाहूँगा एक stack और लोग के answer पर जो कि बहुत ही अच्छी तरह
5:45
से explain करता है उस को। मैंने सोच लिया है कि internet पर जो भी अच्छी अच्छी resources हैं
5:49
उनको आप लोगों को दिखाकर उनसे जो जो learning आप लोग ले सकते हैं वो
5:52
मैं आप लोगों को दूँ। ये जो तो question है इसका link या तो आप type
5:56
कर लेना ये आ जाएगा google में या फिर आप मैं दे दूंगा description में
5:59
अगर मैं भूल जाऊँ तो मुझे नीचे comment में बताना। focus और active two different states होती है
6:03
focus state का मतलब क्या होता है कि अगर आपने element को select
6:07
कर रखा है for receiving input for example अगर मान लो मैं
6:10
किसी किसी input में कोई text डालना चाहता हूँ, कुछ लिखना चाहता
6:15
हूँ, कोई form submit करने वाला हूँ, मैं अपना नाम लिख रहा हूँ input tag में तो वो focus state में आ जाता
6:18
है। active का मतलब क्या होता है कि जैसे ही button पर click करूँगा तो वो active
6:22
हो जाएगा ठीक है, represent the state when the element is being activated by the
6:25
user जैसे ही मैं एक button पर click करता हूं वो active हो जाता है, यहां पर एक
6:29
example भी दिया गया है कि जब आप tab tab button दबाते हो तो आप focus
6:33
में लेकर आते हो, जैसे कि मैं इस page पर अगर tab दबाना शुरू कर दूँ तो ये देख रहे हो आप focus में ये
6:36
आ गया अब ये आ गया, अब ये आ गया focus में, अब ये आ गया focus में
6:40
तो यहां पर मैं focus में ला सकता हूं। अब यहां पर मैं क्या करूंगा कि
6:44
जैसे ही मैं enter मारूंगा मान लो मैं यहां पर enter मारूंगा अभी मैंने enter key press कर
6:47
दी तो क्या हुआ ये profile खुल गई ठीक है? जैसे ही मैं enter मारूंगा तब यहां पर
6:51
इसकी CSS क्या होनी चाहिए वो मैं ये active वाली state से
6:56
देखूंगा। CSS में ये काम कैसे किया जाता है? CSS में ये काम किया जाता है
6:59
colon लगाकर colon active colon hover लगा कर, ठीक है? यहां पर
7:03
हम लोग ये काम कैसे करेंगे? यहां पर हम लोग tail wind की utility classes का
7:07
इस्तेमाल करेंगे, वो कैसे करेंगे आप लोग देखो अभी यहां पर ठीक है, तो मैं यहां पर क्या करूंगा
7:11
मैं कहूंगा यार जैसे ही ये button active होता है, मैं इसके background को करना चाहता
7:14
हूं pink ठीक है, इसके background को pint करना चाहता हूं और जो बहुत अजीब दिखने
7:18
वाला है। ये देख रहे हो आप लोग जैसे ही मैं click कर रहा हूं इसका background pink हो
7:21
जा रहा है ऐसा लग रहा है कि इस पर click किया जा रहा है। अब मैं इसको pink नहीं करूंगा
7:25
obviously मैं इसको सा इसी colour का रखना चाहूंगा जैसे कि BG
7:29
purple आठ सौ था, तो मैं इसको BG purple नौ सौ कर दूंगा ठीक है, मतलब सा
7:33
change दिखिए ऐसा लगे कि हाँ भाई colour बदल रहा है button का जैसे ही उस
7:37
पर click किया जा रहा है। देख रहे हो ये? ये देखो जैसे ही कोई click करे तो मतलब
7:40
user को लगना चाहिए कि यार कुछ हो हो रहा है यहां पर इस पर click करने के बाद यानी कुछ
7:44
हरकत हो रही है ऐसा नहीं है कि ये ऐसे ही हुआ है जैसे था ठीक है तो यहां पर
7:47
कुछ change होना चाहिए तो वो हो रहा है यहां पर। अब ये काम मैंने कर दिया
7:51
आप देख सकते हो कि मैं यहां पर click कर रहा हूं तो ये change हो रही है। ठीक है? अब मान
7:55
लो मैं चाहता हूं कि जैसे ये focus में आए तो मैं यहां
7:58
पर आह मैं चाहता हूं कि जैसे ये focus में आए इसका
8:03
जो BG है वो black हो जाए, ठीक है, और बहुत ही
8:08
अजीब सी बात है but मैं चाहता हूं ये black हो जाए, अब देखो मैं tab दबा रहा हूं जैसे ही ये
8:12
यहां पर black हो गया, आप देख रहे हो ये black हो गया इसका background तो जैसे ये focus
8:15
में आया इसका background black हो गया, और मान लो मैं for some reason चाहता हूं कि जैसे
8:19
ये focus में आए तो मैं जो इसकी आह outline है उसको
8:25
मैं, outline को मैं देना चाहता हूं let us say outline red
8:32
ठीक है outline red सात सौ, ठीक है? मेरे को जिस तरह से देना
8:36
चाहता हूं अब देखो मैं जैसे ही tab दबाऊंगा ये देखो। इसकी
8:40
outline जो है red colour की यहां पर आ गई है आप देख सकते हो, ठीक है? मैंने zoom कर लिया तो
8:44
इस तरह से आप लोग जो है अलग अलग states को दर्शा सकते हो tail wind में
8:47
कि क्या हो किसी भी button पर click किया जाए और किसी भी button पर अगर
8:51
mouse over किया जाए ठीक है यहां पर इस तरह से अगर मैं इसे mouse over कर रहा
8:55
हूं अभी actually ये focus में आ चुका है button जिसकी वजह से ये यहां
8:58
पर black colour दिखा रहा है ठीक है तो मैं नहीं चाहूंगा कि ये black colour
9:02
दिखाए focus में तो जिसमें आप लोगों को बता रहा था, मैं इसको हटा दूंगा ठीक है ना
9:05
ही मैं ये outline रखना। चाहता हूँ focus पे चलो outline रखता हूँ for
9:09
code purposes मैं चाहता हूँ कि आपको code मिले तो इसलिए मैं चाहता हूँ कि आप लोग
9:13
को यहाँ पर outline देखने को मिले। अब देखो मैं जैसे ही यहाँ पर focus कर रहा
9:16
हूँ वैसे ही ये outline आ रही है click कर रहा हूँ यहां पर तो आप लोग देख सकते हो
9:20
कि ये इसका जो background colour है वो change हो रहा है। ठीक है? तो I hope
9:24
कि आप लोग को यहाँ पर आया है इसको देख कर और आप लोग को यहाँ पर इस तरह
9:27
की classes को use करना आ गया अब यही आप लोग कर सकते हो navigation
9:31
bar में भी जहाँ पर यहां पर बहुत सारे buttons होते हैं। home about contacters
9:35
वहां पर जब आप mouse लेकर जाओ तो may be आप चाहोगे कि colour change हो जाए बहुत
9:39
fade हो जाए या कुछ हरकत होती हुई थी ताकि user को लगे कि हाँ यार मैं अपना mouse
9:42
arrow यहां पर लेकर आया हूं। ठीक है। तो इस तरह की चीजें करने के लिए आप लोग
9:46
इस तरह की classes का इस्तेमाल कर सकते हैं। अब जाने से पहले एक बात आप लोगों को बता कर जाऊंगा
9:50
कि ये काम आप लोग tail wind की और utility classes या
9:54
tail wind के break points के साथ भी कर सकते हैं। for example let us say मैं चाहता
9:57
हूं कि small screen पर अगर hover किया जाए। तो background purple
10:03
सात सौ होना चाहिए लेकिन अगर large screen पर या फिर मैं
10:07
कहूंगा MD LG screens पर large screens पर अगर मैं homework करूं
10:13
तो मैं चाहता हूं कि background हो green for some reason ठीक है तो
10:16
ये भी मैं कर सकता हूं। तो यहां पर classes को देखकर directly पता चल रहा है कि क्या
10:20
क्या होने वाला है और यही tail wind की beauty है और यही utility class workflow
10:24
की beauty है। चाहे मैं tail wind use करूँ या मैं कोई और framework use करूँ utility
10:27
class वाला यही beauty है कि यहां पर मैंने बता दिया है
10:31
कि भाई small screen पर hover करने पर ये वाला colour दिखना चाहिए और large
10:35
screen पर over करने पर ये वाला colour दिखना चाहिए। let's see this in action इसको
10:38
action में देखते हैं। यहां पर आप लोग देखो मैं अगर इसको
10:42
large screen में रखता हूँ कुछ इस तरह से और मैं अब अपना यहां
10:46
पर cover कर रहा हूँ इस पर यानी कि अपना mouse arrow लेकर जा रहा हूँ by the way
10:49
मैं यहां पर मैं touch screen वाले system में आ चुका हूँ इस तरह से
10:53
तो ये कुछ मुझे ऐसे दिखा रहा है। लेकिन अगर मान लो मैं mouse arrow लेकर जाता हूं यहां पर तो
10:57
ये green colour हो रहा है। लेकिन अगर मैं यहां पर हूँ और mouse arrow लेकर जा रहा
11:00
हूँ तो आप देख रहे हो यहां पर ये कुछ इस तरह से मुझे दिखा रहा है। ठीक है? तो यहाँ पर
11:04
मैंने simply क्या किया कि यार जैसे ही करो small screen पर
11:07
तो background purple ये होना चाहिए और अगर। live screen पर करो तो background green हो जाना
11:11
चाहिए ठीक है। जो कि यहां पर आप देख ही सकते हो कि यार अब मैं यहाँ पर arrow लेकर जा
11:15
रहा हूँ तो ये green colour का हो जा रहा है। which sounds absolutely amazing कि इस
11:18
तरह की भी कर सकते हो tail wind के अंदर आने वाले videos में हम लोग
11:22
कुछ projects बनाने वाले हैं जो कि ये सारी की सारी एक बार में demonstrate करके
11:25
दिखाएगा आप लोगों को पता चलेगा कि UI को बनाना कितना आसान हो जाता है tail
11:29
wind CSS के इस्तेमाल करके और tail wind CSS की सबसे beauty एक
11:32
और ये भी है कि आपको कुछ componentsse करने के लिए मिल जाते हैं। और
11:37
आप लोग directly उनको copy paste करके उसके बाद customize कर सकते हैं और वो component
11:41
actual में readable होते हैं जैसे कि ये वाला button component जैसे कि मैं
11:44
यहां पर देख सकता हूँ कि भाई X में padding चार की दी गई है Y में two की दी गई है
11:48
purple आठ सौ और इसके बाद text white rounded MD यानि की
11:52
इसमें rounded corners है, इतने rounded corners है SM small devices में
11:56
अगर over करूंगा तो background purple सात सौ हो जाएगा लगता है देखने में कि
12:00
यार ये classes तो mess create कर रही है but actual में tail wind की utility classes
12:04
जब आप एक HTML element के साथ read करते हो तो वो बहुत ज्यादा readable होती है। जरा
12:08
सोचो अगर यही काम हम लोग CSS file की सहायता से कर रहे होते हैं और HTML यहां पर
12:11
लिखते हैं और एक style dot CSS होती और मान लो आप छह महीने बाद
12:15
या may be छह साल के बाद आप अपने project पर वापस आते हो तो आप definitely
12:19
अगर आपने class is equal to my small text लिखा हुआ है तो आप जाकर देखोगे
12:23
उस my small text के अंदर क्या styles defined है ठीक है
12:27
और definite सी बात है कि आप BG अगर मान लो आपने BG
12:31
large बनाया है या फिर BG container बनाया है तो आप जाकर देखोगे
12:35
कि BG container के अंदर कौन-सा background colour defined है। so I hope
12:39
कि आप लोगों को ये बातें समझ में आ रही है की utility class workflow क्यों इतना है
12:43
और क्यों इतना ज्यादा readable है और compare करे इसे traditional CSS
12:47
वाले workflow से तो क्यों इसको ज्यादा better माना जाता है when
12:51
it comes to readability, so I hope कि आप लोगों को ये सारी समझ में आ रही है
12:55
अगर आपने अभी तक tail wind CSS का course की playlist को access नहीं किया
12:59
है तो जरूर करना। अभी के लिए इस video में इतना है guys, thank you so much guys
13:02
for watching this video and I will see you next time।
#Skins
# Themes & Wallpapers