Up next in 10
Customizing Tailwind CSS using tailwind.config.js file_ Tailwind Tutorial #12
5K views
Feb 21, 2024
The video titled "Customizing Tailwind CSS using tailwind.config.js file_ Tailwind Tutorial #12" is a tutorial aimed at web developers interested in leveraging Tailwind CSS for their projects. Tailwind CSS is a popular utility-first CSS framework that allows developers to rapidly build user interfaces. In this tutorial, viewers learn how to customize Tailwind CSS by utilizing the `tailwind.config.js` file. The `tailwind.config.js` file is a configuration file where developers can extend or override default settings provided by Tailwind CSS, enabling them to tailor the framework to their specific project requirements. The video likely covers topics such as: 1. Introduction to the `tailwind.config.js` file and its purpose. 2. Demonstrating how to create and locate the file within a project. 3. Explaining various configuration options available in the file, such as colors, fonts, breakpoints, and more. 4. Providing examples of how to extend or override default settings to customize the design system. 5. Showcasing how these customizations reflect in the generated CSS output. Overall, the video serves as a practical guide for developers looking to harness the full potential of Tailwind CSS by customizing it to suit their unique design needs.
View Video Transcript
0:00
टेल्विंट सीसेस के बारे में जितना हमने अभी तक सीखा है, उसके साथा से हम लोग एक बहुती बढ़ीया वेबसाइट तो बना सकते हैं, लेकिन टेल्विंट सीसेस की सबसे बड़ी ब्यूटी होती है उसकी कंफ फाइल को चेंज करना
0:11
आप लोग अपने उपिनियन के मताबिग टेल्विंट सीसेस की कंफिगरेशन फाइल को कंफिगर कर सकते हैं, आप लोग आड़ कर सकते हैं, इसमें मारजिन की कुछ वैलियूज आप लोग आड़ कर सकते हैं, बॉर्डर के कलर्स, आप लोग और बैक्क्राउंड के कलर्स क�
0:41
इस वीडियो में चलते हैं गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्ड�
1:11
गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर गुर्डर ग�
1:41
अब ऐसा करने से Note GS भी आपका revise हो जाता है काफी हद तक और मैं यहाँ पर जल्दी से आप लोग को यह बताता हूँ कि किस तरह से पता चलेग�
1:48
आप लोगों को Tailwind के अंदर किस तरह से आपको extend करना ह�
1:52
चीजों को किस तरह से Tailwind की शक्तियों को इस्तिमाल करना है अब मैं यहाँ पर क्या करूँगा Tailwind Extend Conf फाइ�
1:59
एक सिंपल सा Google सरच करूँगा और यहाँ पर आप लोग देख सकते हो कि यह जो configuration फाइल है इसके अंदर मुझे कई चीजे देखने को मिल रही ह�
2:06
कैसे मुझे इसको कस्टमाइज करना है अब यहाँ पर आप लोग देखो अगर थोड़ा सा नीचे आओगे तो इस documentation में सब कुछ लिखा हुआ ह�
2:12
कि किस तरह से आप लोग change कर सकते हो configuration को Tailwind क�
2:16
एक command रन करूँगा यहाँ से मैं आप देखो npx tailwind css init माइनस माइनस full मैं लिखूंग�
2:22
और इस command को थोड़ा सा tweak करूँगा क्यूँकि मैं अभी उसकर रहा हूँ यह वाली conf file
2:27
तो मैं एक काम करूँगा एक conf hairy के नाम से फाइल बनाओंगा अब आप किसी भी नाम से बना सकते हो फाइ�
2:32
मैं conf hairy के नाम से बना रहा हूँ conf hairy के नाम स�
2:36
और आप लोग कहोंगे यह conf hairy के नाम से क्यों बना रहे हो फाइल और उसका reason यह है कि यार देख�
2:41
मैं यह जो फाइल है अपनी tailwind.conf.js इसी को as a configuration file यूज़ करना चाहता हू�
2:47
conf hairy जस्त एक text file है जोकि मैं आप लोगों को यहाँ पर दिखाना चाहता हू�
2:51
कि किस तरह से आप लोग यूज़ कर सकते हूँ इस फाइल को to customize your tailwind config ठीक ह�
2:56
अब जल्दी से क्या करूँगा, npm run start करूँगा सबसे पहले तो npm run start
3:03
ठीक है npm run start मैं यहाँ पर कर दिया और यह जो website है यह मेरी खुल ग�
3:08
not the most beautiful website on the internet बट हाँ यार यह हमको tailwind बहुत अच्छी तरह से सिखा ग�
3:13
तो अच्छी ही लगती है यहाँ पर देखो, अगर आप थीम के अंदर देख�
3:17
तो यहाँ पर स्क्रीन्स है, यहाँ पर कलर्स है यहाँ पर कई चीज़ है, अब मेरी बात को धियान से सुनना आप लो�
3:22
यहाँ पर अगर आप लोग देखो, तो कलर्स यहाँ पर black में, colors.black है, white में, colors.white ह�
3:28
बहुत सारे colors यहाँ पर दिये गए हैं फिर इसके बाद columns में आप लोग देख�
3:32
तो यहाँ पर 3x, 2x, इनकी सारी sizing दी हुई है कई चीज़ें दी हुई हैं, spacing मे�
3:37
pixel मतलब 1 pixel, 0, 0 pixel, 0.5 इतना RAM और 1 मतलब इतना RAM
3:43
यहाँ पर 0 से लेकर स्टार्ट हो रहे हैं वैलियोस और एक टाइम के बाद skip हो जा रहे है�
3:47
वैलियोस जैसे कि आप लोग देखो 13 नहीं है 12 के बाद सीझे 14 है, मान ल�
3:51
for some reason, मैं चाहता हूँ कि 13 हो 3.2 RAM अगर मैं, मेरी बात को ध्यान से सुनन�
3:57
अगर मैं, यहाँ पर मैं लिखो div.mx13 और यहाँ पर दिखो this is
4:03
13 margin सेव करूं और यह खो लूँ तो यहाँ पर देखो margin कुछ लगी ही नही�
4:09
उसका reason यह था mx13 को एक class होती नहीं है लेकिन मैं चाहता हूँ mx13 को add करन�
4:13
मैं चाहता हूँ कि mx13 एक class बन जाये और mx13 स�
4:17
क्या हो मैं define करना चाहता हूँ उस चीज को तो मैं क्या करूंगा जो मेर�
4:21
con file है मैं देखूंगा कि तेरा तो है ही नहीं इसमें तो मैं तेरा add कर सकता हू�
4:25
कहाँ पर spacing के अंदर और spacing कहाँ पर है spacing किस चीज के अंद�
4:29
मैं इसको चोटा कर लेता हूँ screens, colors, columns, spacing spacing है मेरे theme के अंदर त�
4:35
मैं theme को extend कर सकता हूँ और इसकी spacing को extend कर सकता हूँ तो मैं करूंगा क्य�
4:39
extend के अंदर एक spacing बनाऊंगा ठीक है और spacing के अंदर मैं क्या करूंग�
4:45
spacing के अंदर एक object बनाऊंगा और इस object के अंदर मैं क्या करूंगा मैं 13 क�
4:49
लिख दूँगा let us say 13 pixel for some reason अगर मैं यहाँ पर देखूंग�
4:53
की यह numbers है तो मैं इसको 13 लिखूंगा और मैं यहाँ पर लिख दूँग�
4:57
let us say 13 pixel ठीक है मान लो ठीक है तो आप लोग देखो यहाँ पर 13 pixel की margin आ ग�
5:03
ठीक है तो एक तरह से मैंने क्या किया कि वो जो 13 value गर रहा थ�
5:07
tailment by default मैंने अपनी configuration फाइल में कह दिया कि भाई 13
5:11
को गर न करो जब मैं mx 13 लिखूंगा तो 13 pixel तेरा क�
5:15
मतलब 13 pixel होगा 12 का मतलब क्या होता है 12 pixel होता है नहीं 12 का मतलब होता है 3
5:19
3.5 rem तो मैं जरा सी consistency रखने के लिए 3.25 rem कर दूँगा इसको ठीक ह�
5:25
3.25 rem मैं कभी भी अपनी confine मैं ऐसा नहीं करूंगा मैं कर सकता हू�
5:29
लेकिन करूंगा नहीं जिस से की inconsistency आये अब ऐसा नहीं 13 को मैं कर दूँँ 130 pixel
5:35
बिना किसी logic के तो आप लोग देखो इस तरह से मैं extend कर सकता हू�
5:40
अब देखो इसमें कुछ animations बने हुए none मना हुआ है, spin बना हुआ है
5:44
ping बना हुआ है, pulse बना हुआ है, bounce बना हुआ है आप देखे रहो हैं ये animations बने हु�
5:48
मैं अपने custom animation बना सकता हूँ और उनको बनाने के बाद मैं क्या करूँग�
5:52
कि यहाँ पर डाल दूँगा, ठीक है जिसके अंदर डालूँगा, extend के अंदर डालूँग�
5:56
और extend के अंदर theme के अंदर, animation के अंदर डाल दूँग�
6:00
तो मुझे पता है कहाँ पर डालना है, ठीक है तो बार बार मुझे यहाँ पर आने की जरूरत नहीं ह�
6:04
इसलिए मैं हमेशा जब भी एक tailwind chasers project बनाता हूँ तो मैं यह ज�
6:08
पूरी full configuration फाइल है इसको देख लेता हूँ, आप लोग कहोंग�
6:12
यह सारे configuration यहाँ पर क्यों नहीं है, यह यहाँ पर क्यों है, minus minus
6:16
full करके क्यों दिखाए गए, यह इसलिए दिखाए गए क्योंकि tailwind वाले नहीं चाहते है�
6:20
कि आप बार बार इतनी बड़ी conf file को देखो, हो सकता ह�
6:24
आप डर जाओ इतनी बड़ी conf file को देखकर क्योंकि इसमें इतनी सारी values है, वो ब�
6:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
6:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
7:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
7:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
8:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
8:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
9:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
9:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
10:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
10:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
11:28
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
11:58
आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो, आप देखो
12:28
तो क्योंकि 518 बाद में है, इसलिए ये वाला जो स्टाइल है, वही ये रखेगा
12:33
इस प्राउलम को कैसे सॉल्प करें, मैं चाहता हूँ कि MD break point पर purple हो जाया कलर
12:38
कभी भी मैं किसी small break point को add करना चाहता हूँ, तो मुझे अपनी extent के अंदर
12:43
सारे के सारे break point लिखने पड़ेंगे, यानि कि मुझे सारे break point को ओपी करके लिखने पड़ेंगे
12:47
तो मैं आपर कॉबा लगाऊंगा, और save करूँगा, format document भी कर लेता हूँ, ताकि अच्छी तना से दिखे
12:54
यह चीज़ अभी भी काम नहीं करी, तो मैं भी क्या करूँगा, adding smaller break points
13:01
till when, यहाँ पर search करूँगा, और यहाँ पर आप देखो, adding smaller break points, यह लोग बता रहे हैं कि अगर आप लोग extend करना चाहते हैं
13:09
तो आप लोग बता रहे हैं कि आपको दिरेक्टली लिखना पड़ेगा इसके अंदर, तो मैंने अभी भी extend के अंदर डाला हुआ, तो यह कहते हैं
13:15
शुरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, शूरू करें, श�
13:45
ब्रेकट पॉइंट या काफी चोटा है आपका ब्रेकट पॉइंट तो आप लोग एकस्टेंड यूज नहीं कर सकते, आपको डिरेक्ली कुछ इस तरह से लिखना पड़ेगा, उसका जीज़न यही है जोकी मैंने आपलोग को बताया, हम चाहेंगे की जो हमारा एक्सेसे�
14:15
ता जाएगा आपकी पगड़ा को टेल विंड के अंदर, तो अबी गेले इस वीडियो में इतने गैस, आई होब की आप लोगो�
14:20
ने यहाँ पर समझ लिया की किस तरह से टेल विंड की कॉंफिगरेशन को एक्सेंड करना है, यह वाला कमांड याद रखना
14:26
मैं आपको नीचे कॉंमेंट में कोड दे दूँगा, और मैं एक काम करता हूँ, यह वाला जो कमांड ने इसे कॉपी करके
14:32
यहाँ पर डाल देता हूँ इस जावसकरप फाइल में, और एक कॉमेंट आड़ कर देता हूँ, ताकि आप लोगों को यहाँ पर यह जो कोड है वो दिखें इसको जनरेट करने का
14:41
अगर आप लोगों ने इस प्लेयलिस्स को अक्सेस नहीं किया था, इसको जरूर अक्सेस कर लेना, क्योंकि यही वो जगह है, ज़ाँपर मैं सारे के सारे और विडियोस, टेल विंड्स रिलेटेड आड़ करूंगा, और सारे के सारे प्रोजेक्ट, चितने भी हम टेल व�
15:11
प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्रोजेक्ट प्�
#Programming
#Skins
# Themes & Wallpapers
#Software
#Web Design & Development
#Web Services