Tailwind CSS ही एक उपयुक्तता प्रथम CSS फ्रेमवर्क आहे जी विकासकांना CSS फाईलवर स्विच न करता कस्टम वेब घटक डिझाइन करण्यास अनुमती देते. या ट्युटोरियलमध्ये, तुम्ही React मध्ये Tailwind CSS कसे इंस्टॉल करायचे आणि एक साधे React पेज तयार करण्यासाठी ते कसे वापरू शकता ते शिकाल.

Tailwind CSS का वापरावे?

आधीच बरेच CSS फ्रेमवर्क आहेत जे विकसक वेब पृष्ठे डिझाइन करण्याचा मार्ग सुलभ करतात. मग तुम्ही Tailwind CSS का वापरावे?

CSS फ्रेमवर्क जसे की बूटस्ट्रॅप आणि फाउंडेशन हे ओपन-सोर्स फ्रेमवर्क आहेत, याचा अर्थ ते डेव्हलपरना पूर्व-परिभाषित घटक प्रदान करतात ज्यात डीफॉल्ट शैली आहेत. हे सानुकूलन आणि सर्जनशीलता या दोन्हींवर मर्यादा घालते आणि तुमच्याकडे सामान्य दिसणार्‍या वेबसाइट्सचा शेवट होतो.

तथापि, Tailwind CSS ही युटिलिटी-फर्स्ट फ्रेमवर्क आहे जी तुम्हाला डायनॅमिक घटक तयार करण्यासाठी क्रिएटिव्ह कंट्रोल देते. आणि बूटस्ट्रॅपच्या विपरीत, आपण इच्छित असल्यास डिझाइन सहजपणे सानुकूलित करू शकता.

Tailwind CSS वापरण्याचा आणखी एक फायदा म्हणजे तुम्हाला CSS बंडलचा आकार लहान होतो कारण ते बिल्ड प्रक्रियेदरम्यान सर्व न वापरलेले CSS काढून टाकते (जे बूटस्ट्रॅपपेक्षा वेगळे आहे, कारण त्यात बिल्डमधील सर्व CSS फाईल्स समाविष्ट आहेत). समाविष्ट आहेत).

या विषयावरील आमच्या लेखातून Tailwind CSS आणि Bootstrap मधील फरकाबद्दल अधिक जाणून घ्या.

Tailwind CSS वापरण्याचे तोटे

Tailwind CSS मध्ये खूप शिकण्याची वक्र आहे, अगदी अनुभवी डेव्हलपरसाठी. युटिलिटी क्लासेसचा पूर्णपणे वापर कसा करायचा हे शिकण्यासाठी काही वेळ लागतो आणि तुम्हाला अनेकदा दस्तऐवजांचा संदर्भ घ्यावा लागेल. तथापि, एकदा तुम्ही वर्गांशी परिचित झाल्यानंतर, तुम्हाला ते साध्या CSS पेक्षा सोपे आणि जलद वाटेल.

CSS आणि HTML फायली वेगळ्या फायलींमध्ये लिहिल्या जाव्यात अशा चिंतेचे पृथक्करण करण्याच्या तत्त्वाचे पालन करणे बहुतेक विकासक पसंत करतात. Tailwind CSS सह, तुम्ही थेट HTML मार्कअपमध्ये CSS लिहू शकता—काहींसाठी ही एक कमतरता आहे.

हे तोटे असूनही, Tailwind CSS ही एक फ्रेमवर्क आहे जी तुम्ही CSS सह आधीच सोयीस्कर असल्यास आणि अधिक जलद डिझाईन्स तयार करू इच्छित असल्यास तुम्ही गांभीर्याने विचार केला पाहिजे.

प्रारंभ करणे: एक प्रतिक्रिया प्रकल्प तयार करा

Create-react-app वापरून रिअॅक्ट ऍप्लिकेशन स्कॅफोल्ड करण्यासाठी टर्मिनलमध्ये खालील कमांड चालवा.

create-react-app Webpack, Babel किंवा Linters सारखी बिल्ड टूल्स कॉन्फिगर न करता प्रतिक्रिया अॅप तयार करण्याचा एक सोपा मार्ग प्रदान करते. याचा अर्थ तुम्ही काही मिनिटांत कार्यरत प्रतिक्रिया वातावरणासह समाप्त कराल.

वरील कमांड react-tailwind नावाचे नवीन फोल्डर तयार करते. फोल्डरवर नेव्हिगेट करा आणि तुमचे आवडते मजकूर संपादक वापरून ते उघडा.

पोस्टसीएसएस बहुतेक ब्राउझरसह CSS सुसंगत करण्यासाठी JavaScript प्लगइन वापरते. हे ऍप्लिकेशन ज्या ब्राउझरमध्ये चालत आहे ते तपासते आणि तुमच्या CSS साठी अखंडपणे काम करण्यासाठी तुम्हाला आवश्यक असलेले पॉलीफिल ठरवते. ऑटोप्रीफिक्सर हे पोस्टसीएसएस प्लगइन आहे जे CSS नियमांमध्ये स्वयंचलितपणे विक्रेता उपसर्ग जोडण्यासाठी caniuse.com वरील मूल्ये वापरते.

टेलविंड सीएसएस सुरू करा

Tailwind CSS डीफॉल्ट कॉन्फिगरेशन फाइल्स व्युत्पन्न करण्यासाठी tailwind init कमांड चालवा.

टेम्पलेट मार्ग कॉन्फिगर करा

तुम्हाला Tailwind CSS ला सांगणे आवश्यक आहे की कोणते CSS वर्ग वापरले जात आहेत हे पाहण्यासाठी फाईल्स तपासल्या पाहिजेत. हे Tailwind ला न वापरलेले वर्ग शोधून काढू देते आणि त्यामुळे व्युत्पन्न CSS चा आकार कमी करते.

tailwind.config.js मध्ये, सामग्री की अंतर्गत टेम्पलेट पथ जोडा.

React मध्ये Tailwind CSS इंजेक्ट करा

@tailwind निर्देश वापरून टेलविंड CSS ऍप्लिकेशनमध्ये समाविष्ट करणे ही पुढील पायरी आहे.

index.css मधील सर्व काही हटवा आणि मूलभूत शैली, घटक आणि उपयुक्तता आयात करण्यासाठी खालील जोडा.

या पृष्ठामध्ये दोन मुख्य विभाग आहेत: एक नेव्हिगेशन बार आणि एक नायक विभाग (ज्यात शीर्षक आणि बटण आहे).

Tailwind CSS CSS लिहिणे कसे सोपे करते हे स्पष्ट करण्यासाठी, साधा CSS आणि Tailwind CSS वापरून वेब पृष्ठ स्टाईल करण्याचा प्रयत्न करा.

अनावश्यक कोड काढण्यासाठी src फोल्डरमध्ये App.js मध्ये बदल करून सुरुवात करा.

Tailwind CSS सह, तुम्हाला प्रत्येक वर्गासाठी CSS नियम लिहिण्याची गरज नाही. त्याऐवजी, तुम्ही उपयुक्तता वर्ग वापरता. हे CSS मालमत्तेच्या कार्यक्षेत्रातील वर्ग आहेत. उदाहरणार्थ, जर तुम्हाला काळ्या पार्श्वभूमी आणि पांढऱ्या मजकूर रंगाचे बटण तयार करायचे असेल, तर तुम्हाला bg-ब्लॅक आणि टेक्स्ट-व्हाइट युटिलिटी क्लासेस वापरावे लागतील.

तुम्हाला App.css आयात करण्याची गरज नाही कारण Tailwind CSS द्वारे व्युत्पन्न केलेल्या शैली index.css मध्ये संग्रहित केल्या जातात ज्या तुम्ही index.js मध्ये पूर्वी आयात केल्या होत्या.

साध्या CSS च्या तुलनेत, या दृष्टिकोनाचा परिणाम कमी कोड मिळतो जो समजण्यास सोपा आहे.

Tailwind CSS सह शैलीबद्ध कोड

या लेखात, तुम्ही Tailwind CSS, त्याची ताकद, तोटे आणि React अॅप्लिकेशन्समध्ये तुम्ही त्याचे उपयुक्तता वर्ग कसे वापरू शकता याबद्दल शिकले. वर्गांव्यतिरिक्त, Tailwind CSS प्रतिसादात्मक लेआउट आणि पुन्हा वापरता येण्याजोगे घटक तयार करण्याची क्षमता यासह इतर अतिरिक्त वैशिष्ट्ये देखील प्रदान करते.