Talewind css tutorials with examples in Hindi
Tailwind CSS एक utility-first CSS framework है जो आपको CSS को बहुत ही आसानी से और तेजी से बनाने की सुविधा देता है। इसके द्वारा आप अपनी वेबसाइट के UI (User Interface) को बहुत ही कस्टमाइज्ड तरीके से डिजाइन कर सकते हैं। Tailwind में आपको pre-defined classes मिलती हैं जो स्टाइल को तुरंत लागू करने में मदद करती हैं, जिससे आप CSS लिखने की जगह सिर्फ class का उपयोग करके स्टाइलिंग कर सकते हैं।
यहां कुछ महत्वपूर्ण Tailwind CSS concepts और उनके उदाहरण दिए गए हैं:
1. Tailwind CSS Setup (Tailwind CSS सेटअप)
पहले Tailwind CSS को अपने प्रोजेक्ट में सेटअप करें।
Step 1: Install Tailwind CSS via npm
Step 2: Tailwind CSS configuration file बनाएं
यह config फ़ाइल tailwind.config.js आपके कस्टम CSS के लिए Tailwind का उपयोग करने में मदद करेगी।
Step 3: Tailwind को अपने CSS फाइल में इम्पोर्ट करें
styles.css या अपनी मुख्य CSS फ़ाइल में यह कोड डालें:
2. Basic Tailwind CSS Classes (बेसिक Tailwind CSS क्लासेस)
Tailwind CSS में कई pre-defined classes हैं जिन्हें आप आसानी से उपयोग कर सकते हैं। कुछ महत्वपूर्ण classes नीचे दी गई हैं:
Example 1: Text Styling
यहां, text-lg
से font size बढ़ेगा, text-blue-500
से text color blue होगा, और font-semibold
से font weight बढ़ेगा।
Example 2: Background Color
यहां, bg-yellow-300
से background color yellow होगा और p-4
से padding दी जाएगी।
Example 3: Padding & Margin
p-8
: padding को 8 unit से सेट करता है।m-4
: margin को 4 unit से सेट करता है।
3. Responsive Design (Responsive Design)
Tailwind CSS में responsive design का काम बहुत आसान होता है, क्योंकि इसमें विभिन्न breakpoints के लिए utility classes उपलब्ध हैं।
Example: Responsive Design with Tailwind
यहां:
md:p-8
का मतलब है कि medium screens पर padding बढ़ा दी जाएगी।lg:p-12
large screens पर padding और बढ़ जाएगी।
4. Flexbox and Grid (Flexbox और Grid)
Tailwind CSS में Flexbox और Grid Layout का बहुत आसान तरीके से उपयोग किया जा सकता है।
Example 1: Flexbox
यहां:
flex
से flexbox layout लागू होगा।justify-between
से items के बीच space evenly distribute होगा।items-center
से items को vertically center किया जाएगा।
Example 2: Grid Layout
यहां:
grid
से grid layout लागू होगा।grid-cols-2
से दो columns में items arrange होंगे।gap-4
से items के बीच space मिलेगा।
5. Hover & State Variants (Hover और State Variants)
Tailwind CSS में hover और अन्य state variants का उपयोग बहुत आसानी से किया जा सकता है।
Example: Hover Effect
यहां, जब आप बटन के ऊपर hover करेंगे, तो उसका background color blue से dark blue (700) हो जाएगा।
6. Customizing Tailwind CSS (Tailwind CSS कस्टमाइजेशन)
Tailwind CSS को आप अपनी ज़रूरत के हिसाब से कस्टमाइज भी कर सकते हैं।
Example: Custom Colors and Fonts
tailwind.config.js में:
अब आप अपनी HTML में इस कस्टम color और font का उपयोग कर सकते हैं:
7. Using Tailwind with HTML (HTML में Tailwind का उपयोग)
Tailwind CSS को HTML में यूज़ करना बहुत आसान है। बस आपको CSS class name को सही तरीके से लागू करना होता है। एक simple example:
Conclusion
Tailwind CSS एक शक्तिशाली और flexible framework है जो आपकी CSS को तेज़ी से लिखने में मदद करता है। इसके utility-first approach के कारण, आप सिर्फ classes का इस्तेमाल करके styling कर सकते हैं, और अधिक कस्टमाइज़ेशन के लिए Tailwind config file का उपयोग कर सकते हैं।
अधिक जानकारी और उदाहरणों के लिए, Tailwind CSS की आधिकारिक डॉक्युमेंटेशन का अध्ययन करें।
Comments
Post a Comment