Tailwind CSS v2.0 | Forms Plugin codewithchu German Hindi

Tailwind CSS v2.0 | Forms PluginYouTube↗ IA↗(long shot)
Howto & Style 5.5K views 121 likes 2 dislikes 23 Nov 2020

codewithchu 698 subscribers Canada YouTube↗

Normalisierung unserer Formulare Hey, ich bin mit einem weiteren Video zurück und wir werden uns Formulare in Rückenwind-

हमारे रूपों को सामान्य करना मैं एक और वीडियो के साथ वापस आ रहा हूं और हम टेलविंड सीएसएस 2.0 में रूपों को देख रहे हैं

CSS 2.0 ansehen. Frühere Versionen von Rückenwind-Formularen sahen nicht so gut aus, als müssten Sie

और टेलविंड फॉर्म के पिछले संस्करणों को सबसे अच्छा नहीं लगता है कि आपको

Ihre eigenen Stile sofort erstellen sie sah nicht die größte

बॉक्स से बाहर अपनी शैली बनाना होगा। वे अब संस्करण 2.0 में सबसे बड़े नहीं दिखते

in der Version 2.0 sie dieses neue Plugin tailwind CSS Formulare erstellt haben und es, was es tut, ist

हैं, उन्होंने इस नए प्लग-इन टेलविंड सीएसएस फॉर्म को बनाया है और यह क्या करता है

es setzt die Stile und es normalisiert ihnen nehmen wir einen Blick hier ist die Demo ihres Plugin wir sehen können

यह शैलियों को रीसेट करता है और यह उन्हें सामान्य करता है आइए एक नज़र डालते हैं उनके प्लगइन का डेमो जिसे हम देख सकते

Da die Formulare hier alle Formularfelder hier sind, können wir sehen, dass sie alle Stile zurückgesetzt haben.

हैं यह है कि यहाँ सभी फॉर्म फ़ील्ड यहाँ हैं, हम देख सकते हैं कि उन्होंने अब सभी शैलियों को रीसेट कर दिया

Von hier aus können Sie Ihre Utility-Klassen anwenden, um ihnen Ihr eigenes Design-System oder

है यहाँ से आप अपनी उपयोगिता प्रणाली को लागू करना शुरू कर सकते हैं अपने स्वयं के डिज़ाइन सिस्टम को जोड़ने के लिए या

Ihr eigenes Styling hinzuzufügen , und von hier aus of gibt uns eine Basis, mit der wir arbeiten können, ähnlich

अपने स्टाइल को उनसे जोड़ने के लिए और यहाँ से यह इस तरह का है हमें एक आधार देता है कि हम उनके साथ उसी तरह काम कर सकते हैं

wie sie zurückgesetzt wurden, wenn Sie sich ihre Header-Tags ansehen. h186 Sie sind alle zurückgesetzt, und Sie

जैसे वे कैसे रीसेट करते हैं यदि आप उनके हेडर टैग h186 पर एक नज़र डालते हैं तो वे सभी रीसेट हो जाते हैं और आप बस

wenden einfach Ihre Utility-Klassenstile auf sie an, und das spielt keine Rolle dass ein h1 und ein h6 sie alle

अपनी उपयोगिता वर्ग शैलियों को उनके लिए लागू करना शुरू करते हैं और इससे कोई फर्क नहीं पड़ता कि एक एच 1 और एच 6 वे सभी बिल्कुल एक

genau gleich aussehen und sie nur anfangen, unterschiedlich auszusehen Wenn Sie Ihre Utility-Klassen anwenden

जैसे दिखते हैं और वे केवल अलग दिखने लगते हैं जब आप अपनी उपयोगिता कक्षाओं को लागू करते हैं

und ich denke, das ist genau das, was sie damit mit ihren Formularen versucht haben. Gehen

और मुझे लगता है कि वे अपने रूपों के साथ ऐसा करने की कोशिश कर रहे थे, तो आइए अब यहां वापस

wir jetzt hierher zurück. Dieses Plugin ist nicht sofort einsatzbereit. Wir müssen es installieren. Wir installieren es über npm

आते हैं, यह प्लगइन उस बॉक्स से बाहर नहीं आता है जिसे हमें स्थापित करना है जिसे हम npm के माध्यम से स्थापित करेंगे।

und dann werden wir es über ein Plug-In mit tailwind.config.js anwenden. Hier ist das Beispiel für die Verwendung, die

और फिर हम इसे tailwind-config.js के प्लग-इन का उपयोग करके यहां लागू करेंगे। मेरे GitHub पर नमूना का उपयोग

ich auf meinem GitHub und in meinem Rückenwind-CSS-Version-2-Setup-Installations-Repo hier habe.

कर रहा हूं और मैं अपने tailwind css संस्करण 2 में सेटअप कर रहा हूं, यहां रेपो स्थापित करें

Ich werde dies als verwenden Meine Basis für dieses Video und Klonen Ich werde es hier klonen. Schnapp dir das

मैं इसे इस रूप में उपयोग करने जा रहा हूं इस वीडियो के लिए मेरा आधार और यह क्लोन मैं यहाँ जा रहा हूँ इसे पकड़ो

und mache Git-Klon und ich mache Rückenwind oder Tw-V2-Form, wenn mein Ordner in

और क्लोन क्लोन कर रहा हूँ और मैं अपने फ़ोल्डर के रूप में ठीक हो रहा हूँ या tw-v2- फार्म

Ordnung ist und CD in Tw-V2-Form und öffne vs code (code.) vs Codes jetzt hier unten öffnen

और ठीक करने के लिए दो vd- रूप में सीडी और खोलने बनाम कोड (कोड।) बनाम कोड अब नीचे खुलते हैं

Ich muss npm für dieses Projekt hier installieren, da ich meine Knotenpakete nicht

, मुझे इस परियोजना के लिए एनपीएम इंस्टॉल करने की आवश्यकता है क्योंकि मेरे पास मेरे नोड पैकेज

installiert habe und pm install jetzt werden wir auch npm installieren d

स्थापित नहीं हैं और शाम को स्थापित होने वाले हैं अब हम भी करने जा रहे हैं npm स्थापित करें d

tailwindcss-Formulare lassen Sie uns überprüfen Das hier draußen jetzt, das hier installiert ist, ist klar, dass

tailwindcss- प्रपत्र आइए देखें कि अब यहाँ स्थापित है कि यहाँ स्पष्ट है कि

wir uns jetzt unsere Tail-One-Konfiguration ansehen müssen. Wir müssen ein paar

अब हमारी पूंछ पर एक नज़र डालते हैं एक विन्यास हम एक जोड़ी

Dinge tun, die wir ihr hinzufügen müssen e also werden wir diese

बातें हम इसे करने के लिए इसे करने के लिए जा रहे हैं करने की आवश्यकता होगी ई तो हम इस

wir werden den Rückenwind css machen, wir werden die erweiterten Farben hier bekommen,

लिए जा रहे हैं हम टेलविंड सीएसएस करने जा रहे हैं हम यहां विस्तारित रंग प्राप्त करने जा रहे

wir werden das loswerden und wir werden hellblaue Farben machen

हैं हम इससे छुटकारा पाने जा रहे हैं और हम हल्के नीले रंग करने जा रहे हैं

hellblau und wir werden auch das Grau überschreiben, wir werden die Farben

हल्का नीला और हम ग्रे को ओवरराइड करने जा रहे हैं, हम रंगों को सही ग्रे करने जा रहे हैं,

echtes Grau machen, also denke ich, dass das aktuelle Grau ein wenig blau ist und dies ist der Weg, es zu überschreiben, wir

इसलिए मुझे लगता है कि वर्तमान ग्रे थोड़ा नीला ईश है और इसे ओवरराइड करने का तरीका है कि हम

könnten einfach ein anderes für echtes Grau verwenden, aber dann müsste ich jedes Mal echtes Grau schreiben,

सच्चे ग्रे के लिए एक और एक का उपयोग कर सकते हैं लेकिन तो मुझे हर बार बस ग्रे के बजाय

anstatt nur ein bisschen mehr Grau zu tippen, wenn ich das mache und ich werde hier den dunklen Modus aktivieren.

हर बार थोड़ा और सही लिखना होगा, अगर मैं ऐसा करूं और मैं यहां डार्क मोड को इनेबल करने जा रहा हूं

Lass uns das speichern und versuchen zu bauen, ich werde meine Quelle überprüfen CSS-Datei

तो आइए इसे सेव करते हैं और आइए मैं अपने सोर्स को चेक करने जा रहा हूं सीएसएस फ़ाइल

, um sicherzustellen, dass es nichts gibt. Lass uns das loswerden. Ich brauche das nicht.

यह सुनिश्चित करने के लिए है कि कुछ भी नहीं है चलो इससे छुटकारा पाएं मुझे इसकी आवश्यकता नहीं है

Okay. Lass uns speichern, um das zu tun. Wir müssen npm run tw machen. Build npm run build

ठीक है चलो ऐसा करने के लिए बचाएं कि हमें एनपीएम रन ट्विन करने की आवश्यकता है: एनपीएम रन बिल्ड

okay, das ist erledigt. Lass uns das größer machen. Lass uns das tun Sehen Sie, wie das aussieht,

ठीक करें ताकि यह किया जाए कि यह बड़ा करें चलो इसे पूरा करें देखें कि ऐसा क्या लगता है कि

es wird ein bisschen anders aussehen als normal. Ja,

यह सामान्य हाँ की तुलना में थोड़ा अलग दिखने वाला है

weil ich die Klassen hier losgeworden bin, okay, aber es ist immer noch wo rking und unsere Skripte funktionieren in Ordnung,

क्योंकि मुझे यहाँ कक्षाएं ठीक मिलीं लेकिन यह अभी भी है रेकिंग और हमारी स्क्रिप्ट ठीक काम कर रही है

und ich denke, unser Formular hier funktioniert auch. Schauen wir uns unser HTML an. Ich werde es jetzt löschen.

और मुझे लगता है कि यहां हमारा फॉर्म भी काम कर रहा है आइए एक नजर डालते हैं हमारे html पर, मैं इसे अब डिलीट करने जा रहा हूं मैं

Ich möchte nicht zu viel HTML in diesem Video schreiben, weil ich denke, dass ich '

इस वीडियो में बहुत ज्यादा html लिखना नहीं चाहता क्योंकि मुझे लगता है कि मैं ' मैं

Ich werde ziemlich lang, also werde ich es einfach kopieren und einfügen. Ich werde es hier greifen und einfügen.

बहुत लंबा हो जाऊंगा, इसलिए मैं इसे कॉपी करने और पेस्ट करने जा रहा हूँ, मैं यहाँ हड़पने जा रहा हूँ और पेस्ट कर रहा हूँ और

Dies ist unser Markup für das, womit wir arbeiten werden, und wir fangen einfach von hier aus an

यह हमारा मार्कअप है कि हम किसके साथ काम करने जा रहे हैं और हम यहाँ से शुरू करेंगे।

Wir haben dies jetzt, was ich hier tun möchte, ist, diesen Teil hier zu erstellen, also werde ich

अब हमारे पास यह है कि मैं यहां क्या करना चाहता हूं, इस भाग को यहां बनाएं ताकि मैं

Gitterraster Spalte eins und Lücke von vier in Ordnung machen, so dass ich dies nach links verkleinern möchte,

ग्रिड ग्रिड कॉलम एक और चार के अंतराल को ठीक करने जाऊं, ताकि मैं इसे बाईं ओर सिकोड़ना चाहता हूं

was einen Selbststart rechtfertigen wird Ich möchte dies in die Mitte stellen und das wird die Mitte rechtfertigen

जो कि स्वयंभू होने के लिए उचित है मैं इसे केंद्र में रखना चाहता हूं और यह उचित

, also denke ich, dass wir jetzt gehen und dies ändern sollten. Dies sollte Text klein sein und sollte dies

केंद्र होगा, इसलिए मुझे लगता है कि अब चलो और इसे बदलें यह पाठ छोटा होना चाहिए और इसलिए

auch Text-grau-400 tun und das alles verkleinern

मुझे पाठ-ग्रे -400 करने जा रहे हैं और यह सब सिकुड़ जाता है

Okay, ich denke, das deckt so ziemlich das meiste davon ab. Lassen Sie uns hier unseren Rückenwind-CSS öffnen

ठीक है, मुझे लगता है कि बहुत अधिक कवर किया गया है कि चलो हमारे टेलवॉन्ड सीएसएस को यहां खोलें

und ich werde einige Änderungen vornehmen. Lassen Sie uns hier einen Körper hinzufügen, den ich tun werde add apply bg-grey-100

और मैं कुछ बदलाव करने जा रहा हूं चलो यहां एक बॉडी जोड़ें जो मैं करने जा रहा हूं Add bg-gr-100

text-grey-900 speichere das oh und was wir hier tun müssen, ist, dass wir unser Überwachungsskript npm run tw benötigen: watch

टेक्स्ट-grey-900 को सहेजें कि ओह और हमें यहाँ क्या करने की आवश्यकता है, हमें अपनी घड़ी की स्क्रिप्ट npm run tw:

lasst uns einige zu unserem hinzufügen, wir brauchen randumgerundete

की जरूरत है, चलिए कुछ जोड़ते हैं, हमें हमारी जरूरत है बॉर्डर राउंड

Polsterung-10, wir machen Rand 10-bg weißer

पेडिंग -10 हम मार्जिन करेंगे 10-bg सफेद

Schatten klein in voller Breite oder Breite voll und eine maximale Breite von Ich werde klein machen,

छाया छोटी पूरी चौड़ाई या चौड़ाई पूर्ण और मैं इसे बचाने के लिए जा रहा है कि अब हम बनाने के लिए जा रहा है की

außer dass es gebaut wird, jetzt haben wir eine Art Login-Karte, die

एक अधिकतम चौड़ाई है, हम अपने लॉगिन कार्ड की तरह है और

ich kopieren und einfügen werde und das ist Das Standard-Plugin für Rückenwind-Formulare.

मैं इस पर कॉपी और पेस्ट करने जा रहा हूँ डिफ़ॉल्ट टेलविंड फॉर्म प्लगइन

Warum wird es so hervorgehoben? Okay, was ich hier tun möchte, ist, dass ich unsere im Grunde alle diese

क्यों यह उस तरह से हाइलाइट कर रहा है ठीक है कि मैं यहां क्या करना चाहता हूं, मैं चाहता हूं कि हम मूल रूप

stilisieren möchte. Geben Sie ihm also einen globalen globalen Stil, der zu dem beiträgt, was bereits mit dem Plugin vorhanden ist,

से इन सभी को स्टाइल करना चाहते हैं, इसलिए इसे एक वैश्विक वैश्विक शैली दें जो पहले से ही प्लगइन के साथ क्या है

damit das Plugin alles entfernt setzt es zurück und normalisiert es und jetzt fügen wir unsere

इसलिए प्लगइन सब कुछ बाहर निकालता है रीसेट करता है और इसे सामान्य करता है और अब हम अपनी

eigenen Stile hinzu, also werde ich shadow-sm bg-grey-100 machen, um zu sehen, wie das jetzt aussieht, wenn unsere Formulare

खुद की शैलियों को इसमें जोड़ रहे हैं, इसलिए मैं छाया-एसएम बीजी-ग्रे -100 को देखने जा रहा हूं कि कैसे दिखता है कि अब हमारे रूप

funktionieren. Das Plugin entfernt alles, normalisiert alles und jetzt erlaubt es

प्लग-इन काम कर रहे हैं सब कुछ सामान्य हो जाता है और अब यह हमें अनुमति देता

uns Um nur unsere eigenen Stile hinzuzufügen, wie wir es bereits mit anderen Tags

है बस अपनी खुद की शैलियों को जोड़ने के लिए जैसे कि हम पहले से ही अन्य टैग के साथ क्या कर रहे हैं

tun, haben wir es einfach gemacht fügte einen runden Rand und einen Schattenhintergrund hinzu,

अब हमने जो किया वह बस था एक राउंड बॉर्डर को एक शैडो बैकग्राउंड जोड़ा गया है

um ihm ein bisschen Stil zu verleihen. Jetzt möchte ich den

ताकि यह दे सके कि थोड़ा ui इसे थोड़ा स्टाइल देता है अब मैं आगे जाना चाहता हूं

neuen Fokusring ausprobieren, damit ich den Fokusrand hellblau und so mache ist die Farbe

और उस नए फोकस रिंग को आज़माना चाहता हूं ताकि मैं बॉर्डर लाइट ब्लू को फोकस करूं और यह विस्तारित पैलेट से

aus der erweiterten Palette, auf die ich fokussieren werde, und fordere sie auf, Ringfokusring-Hellblau-200

रंग मैं ध्यान केंद्रित करने के लिए जा रहा हूं और यह बताता हूं कि रिंग फोकसिंग-लाइटब्लू -200

und Fokusringopazität 50 auszuführen. Speichern wir das, wenn ich mit der Maus darüber fahre, bekomme ich den Fokusring hier. Schauen wir uns

और फोकस रिंग अपारदर्शिता 50 करें। आइए बचत करते हैं कि जब मैं पर ध्यान केंद्रित कर रहा हूं तो यहां फोकस रिंग मिल रही है तो आइए

das an Unser Button und ich haben diesem Button bereits eine Klasse hinzugefügt. Wir werden so

एक नजर डालते हैं हमारे बटन और मैंने पहले से ही इस बटन में एक वर्ग जोड़ दिया है और हम जो भी करेंगे वह

ziemlich einen abgerundeten Rand hinzufügen. px-6 py-2 bg-lightblue-400 text-grey-100 border-lightblue

बहुत हद तक लागू है गोल बॉर्डर px-6 py-2 bg-lightblue-400 text-grey-100 बॉर्डर-लाइटब्लू

shadow-sm und speichern wir das Jetzt haben wir unseren Button. Jetzt möchte ich diesen Fokusring hinzufügen,

शैडो-एस.एम. अब हमारे पास हमारा बटन है, मैं उस फ़ोकस रिंग को इस पर जोड़ना चाहता हूं,

aber auf einem Schwebeflug und um das zu tun, müssen wir gehen und hier ändern. Wir müssen dies erweitern

लेकिन एक होवर पर और ऐसा करने के लिए कि हमें यहां जाने और बदलने की आवश्यकता है, हमें इसे विस्तारित करने की आवश्यकता है

und um dies zu tun, müssen wir hier in der Variante Ringfarbe hinzufügen Unsere Variante für Hover

और ऐसा करने के लिए हमें यहां वैरिएंट रिंग रंग जोड़ने की आवश्यकता है होवर के लिए हमारे वैरिएंट को

hier brauchen wir Deckkraft und wir brauchen

यहाँ अस्पष्टता की आवश्यकता है और हमें चौड़ाई की

Breite. Schauen wir uns jetzt an, wo wir die Variante erweitern. Wir können sie unserem CSS hinzufügen,

आवश्यकता है आइए अब एक नज़र डालते हैं कि हम उस वेरिएंट को बढ़ाते हैं जिसे हम अपनी सीएसएस में जोड़ सकते हैं

was wir brauchen, um d o hier ist schnell, lass uns das packen

जिसे हमें घ की आवश्यकता है यहाँ ओ जल्दी से इसे पकड़ लेते हैं

und wir müssen dieses in bg ändern und dieses wird 600 sein, außer dass

और हमें इसे bg में बदलने की आवश्यकता है और यह एक 600 सेव करने वाला है कि

wir das jetzt beheben, weil diese Farbe die Standardfarbe ist. Nehmen

अब इसे ठीक कर दें क्योंकि यह रंग डिफ़ॉल्ट रंग है

wir an, es ist diese Farbe

मान

Text-Hellblau-400.

लें कि यह इस रंग का टेक्स्ट-लाइटब्लू -400 है।

yeah 400

हाँ 400

also das ist erledigt, schau dir diesen Avatar hier an und wie nennen wir ihn als Avatar

इसलिए कि इस अवतार पर एक नज़र डालें और हम इसे अवतार के रूप में देखते हैं

und wir machen ihn bei

और हम इसे

bewerben und nur grau-300.

लागू करेंगे और सिर्फ ग्रे -300।

Das ist so ziemlich das, was ich hier machen wollte.

यह बहुत ज्यादा है जो मैं यहां करना चाहता था,

Schauen wir uns das jetzt im Vollbildmodus an und es gibt unsere Anmeldeseite, sodass wir in Rückenwind Version 2.0 mit dem

चलो अब इसे पूर्ण स्क्रीन पर देखें और हमारे लॉगिन पृष्ठ है ताकि टेलविंड संस्करण 2.0 में

Formular-Plug-In damit die Formulare normalisieren und zurücksetzen können, die wir können Wenden Sie dann einfach

फॉर्म प्लग-इन के साथ हम इसे सामान्य करने और उन रूपों को रीसेट करने में सक्षम हैं जो हम कर सकते हैं तो बस

unsere Utility-Klassen wie gewohnt an, wie wir es mit jeder anderen Utility-Klasse tun würden, und es macht es

अपने उपयोगिता वर्गों को सामान्य की तरह लागू करें जैसे कि हम किसी भी अन्य उपयोगिता वर्ग के साथ करेंगे और यह

jetzt ziemlich einfach, als kleinen Bonus möchte ich gehen und dies einfach in den dunklen Modus konvertieren.

बहुत आसान बना देता है क्योंकि मैं थोड़ा बोनस चाहता हूं और बस इसे अंधेरे मोड में परिवर्तित कर देता हूं,

Lassen Sie

चलो इसे स्पष्ट करें कि

uns das klarstellen. Schauen wir uns das an Rückenwind, nur um sicherzugehen, dass wir nur den dunklen Modus einstellen. Der dunkle Modus

एक नज़र डालते हैं टेलवॉन्ड बस यह सुनिश्चित करने के लिए कि हम सिर्फ यह सुनिश्चित करें कि हम डार्क मोड डार्क

ist hier. Kehren wir zum Abschleppen zurück, um den dunklen Modus zu aktivieren. Wenn Sie mein anderes Video nicht gesehen haben, habe

मोड सेट करते हैं, यहाँ पर डार्क मोड को करने के लिए रस्सा खींचते हैं और यदि आपने मेरा दूसरा वीडियो नहीं देखा है तो मेरे

ich ein Video für den dunklen Modus Schnellere Version, die wir hinzufügen können, anwenden und wir brauchen es

पास डार्क मोड के लिए एक वीडियो है जल्दी संस्करण हम जोड़ सकते हैं लागू करते हैं और हमें अपने शरीर पर

auf unserem Körper und was wir tun, ist dunkel. Ich werde das kopieren und ich werde bg-grey-800 machen.

इसकी आवश्यकता होती है और हम जो कुछ भी करते हैं वह अंधेरा है, मैं इसकी नकल करने जा रहा हूं और मैं बीजी-ग्रे -800

Ich werde dunkel machen: text-grey -100, also kehre ich diese beiden

करने जा रहा हूं - मैं अंधेरे में जा रहा हूं: पाठ-ग्रे -100 तो मैं मूल रूप से इन दोनों को

jetzt hier auf unserer Karte dunkel um und wir machen bg-grey-900 in dunkel: border-grey-800

अब हमारे कार्ड के अंधेरे में उलट रहा हूं और हम अंधेरे में बीजी-ग्रे -900 करेंगे: बॉर्डर-ग्रे -800 यहां हम

hier werden wir

अंधेरे लागू

dunkel und anwenden Wir werden uns konzentrieren und für hier wird die erste

करेंगे हम ध्यान केंद्रित करेंगे और यहाँ के लिए अंधेरा पहले जाता है

Sekunde dunkel. Dies ist unsere nächste Art von Präfix. Wir werden Border-Grey-300 Dark

दूसरी हमारी अगली तरह की उपसर्ग है हम सीमा-ग्रे -300 डार्क

Focusing-Grey-200 ausführen.

फोकसिंग-ग्रे -200 करेंगे

Wir müssen dies nicht tun, da dies Standard sein wird

हम इसे इसके लिए करने की आवश्यकता नहीं है क्योंकि यह मानक है

oder Da dies jetzt mit beiden funktioniert, fügen wir Apply Dark hinzu: Text-Lightblue-600-

या होने जा रहा है जो अब दोनों के साथ काम करता है, उसे लागू करते हैं अंधेरे को जोड़ते हैं: टेक्स्ट-लाइटब्लू -600

Avatar, den wir bei Apply Dark: Text-Grey-600 ausführen. Hier wenden

अवतार हम अंधेरे पर लागू करेंगे: टेक्स्ट-ग्रे -600 और यहां हम ऐसा करेंगे कि अंधेरा

wir Dark an und müssen tun, wo es hier ist Wir machen diese

लागू करें और हमें यह करने की आवश्यकता है कि यह यहां कहां है हम इस

500 zu

500 को

dieser 600 und wir machen dunkle

एक 600 करेंगे और हम अंधेरा 600

600,

करेंगे,

okay, speichern wir das und wir machen npm,

ठीक है कि बचाओ और हम npm

um das auszulösen, und es gibt unseren dunklen Modus, okay, lass mich die Systemeinstellungen öffnen

ट्रिगर करेंगे और वहाँ हमारी डार्क मोड ठीक है मुझे सिस्टम प्राथमिकताएं खोलने दें

und los geht's, das ist hell und das ist dunkel hell und dunkel, so dass es jetzt ziemlich einfach ist, zu wechseln und

और यहां हम जाते हैं कि प्रकाश है और यह अंधेरा है प्रकाश और अंधेरा इतना आसान है कि अब स्विच करें और

einen dunklen Modus für Ihre Website oder Ihre Benutzeroberfläche zu erstellen. Lassen Sie uns fortfahren und für die Produktion bauen.

अपनी वेबसाइट या अपने ui के लिए एक डार्क मोड बनाएं और आगे बढ़ने दें और उत्पादन के लिए निर्माण करें

Dazu können wir unseren npm run tw: prod

और यह करने के लिए कि हम अपने npm रन ट्विन का उपयोग कर सकते हैं:

verwenden, der den Knoten-Unterstrich und die Umgebung verwendet Produktionsvariable

इसे नोड अंडरस्कोर और पर्यावरण का उपयोग करता है उत्पादन

und wir verwenden Post-CSS, um es zu erstellen, damit das erledigt ist. Schauen wir uns unsere CSS-Datei an

चर और हम इसे बनाने के लिए पोस्ट सीएसएस का उपयोग कर रहे हैं ताकि हम अपनी सीएसएस फ़ाइल की जांच कर

und es löscht CSS mit und minimiert. Okay, lassen Sie uns Schließen Sie, dass wir sicherstellen werden, dass

सकें और यह सीएसएस के साथ शुद्ध हो और ठीक से चलें बंद करें कि हम यह सुनिश्चित करेंगे कि

es funktioniert. Lassen Sie es uns einfach ein paar Mal neu laden. Bringen Sie dies zurück und es funktioniert auf beiden.

यह काम कर रहा है बस इसे फिर से लोड करें एक दो बार इसे वापस लाएं और यह दोनों पर काम करता है

Lassen Sie uns hier eine kurze Zusammenfassung machen. In früheren Versionen von CSS-Forenstilen mit Rückenwind waren die Standardstile

चलो यहां से बॉक्स के बाहर टेलविंड सीएसएस फोरम शैलियों के

nicht die besten und wir brauchte ein wenig Finesse Rückenwind

पिछले संस्करणों में एक त्वरित पुनर्कथन करें और हम सबसे बड़े नहीं थे। थोड़ी सी चालाकी की ज़रूरत थी टेलविंड

veröffentlicht ein neues Formular-Plugin, das installiert und zu unserer Rückenwind-Konfiguration hinzugefügt werden musste.

ने एक नया फॉर्म प्लगइन जारी किया, जिसे हमारे टेलवॉन्ड में जोड़ा और जोड़ा जाना था

Das Plugin normalisiert und setzt die Formularstile für uns zurück und gibt uns eine Basis zum Arbeiten,

, प्लगइन को सामान्य करता है और हमारे लिए फ़ॉर्म शैलियों को रीसेट करता है और हमें काम करने के लिए एक आधार

von der aus wir unsere Dienstprogrammklassen nur anwenden können Wie jedes unserer anderen Tags haben

देता है, जिससे हमें अपनी उपयोगिता कक्षाएं लागू करने की अनुमति मिलती है हमारे किसी भी अन्य टैग की तरह,

wir auch den neuen Fokusring berührt. Wir haben Pseudoklassen in unserem Add hinzugefügt. Wenden Sie

हमने भी नए फोकस रिंग पर छुआ, हमने अपने ऐड के भीतर छद्म कक्षाएं जोड़ीं , होवर लागू

den Hover und den Fokus als Bonus an. Wir haben den Dunkelmodus für unsere Benutzeroberfläche eingerichtet, der jetzt nicht so schwierig ist und

करें और एक बोनस के रूप में फ़ोकस करें जिसे हमने अपने यूई के लिए डार्क मोड सेट किया था जो अब मुश्किल नहीं था, जो

alles abdeckt, was ich wollte Um Formulare abzudecken und ich werde im nächsten Video mit euch sprechen.

मुझे सब कुछ कवर करना चाहता था। रूपों के लिए कवर करने के लिए और मैं अगले वीडियो में आप लोगों से बात करूंगा

Danke, dass ihr euch das Video angesehen habt. Ich hoffe, euch hat der Inhalt bisher

। वीडियो देखने के लिए धन्यवाद मुझे आशा है कि आपने अब तक सामग्री का आनंद लिया है

gefallen. Wenn ihr Fragen oder Feedback habt, hinterlasst bitte unten einen Kommentar, um

यदि आपके कोई प्रश्न या प्रतिक्रिया है, तो कृपया नीचे दी गई टिप्पणी छोड़ दें

mit den neuesten Inhalten von auf dem Laufenden zu bleiben das Kanal können Sie abonnieren, indem Sie hier in der Mitte klicken

ताकि नवीनतम सामग्री से अपडेट रहें चैनल आप यहीं बीच में क्लिक करके सदस्यता ले सकते हैं