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

bash
npm install -D tailwindcss
npx tailwindcss init

Step 2: Tailwind CSS configuration file बनाएं

यह config फ़ाइल tailwind.config.js आपके कस्टम CSS के लिए Tailwind का उपयोग करने में मदद करेगी।

javascript
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Tailwind को अपने CSS फाइल में इम्पोर्ट करें

styles.css या अपनी मुख्य CSS फ़ाइल में यह कोड डालें:

css
@tailwind base;
@tailwind components;
@tailwind utilities;

---

2. Basic Tailwind CSS Classes (बेसिक Tailwind CSS क्लासेस)

Tailwind CSS में कई pre-defined classes हैं जिन्हें आप आसानी से उपयोग कर सकते हैं। कुछ महत्वपूर्ण classes नीचे दी गई हैं:

Example 1: Text Styling

html
<p class="text-lg text-blue-500 font-semibold">
  यह एक Example है Tailwind CSS में Text Styling का।
</p>

यहां, text-lg से font size बढ़ेगा, text-blue-500 से text color blue होगा, और font-semibold से font weight बढ़ेगा।

Example 2: Background Color

html
<div class="bg-yellow-300 p-4">
  यह एक Example है Background Color का।
</div>

यहां, bg-yellow-300 से background color yellow होगा और p-4 से padding दी जाएगी।

Example 3: Padding & Margin

html
<div class="p-8 m-4 bg-gray-200">
  यह Example है Padding और Margin का।
</div>

• 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

html
<div class="bg-blue-500 text-white p-4 md:p-8 lg:p-12">
  यह div छोटे स्क्रीन पर padding 4 unit होगी, 
  medium screen पर 8 unit, और large screen पर 12 unit।
</div>

यहां:

• 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

html
<div class="flex justify-between items-center p-4">
  <div class="bg-red-500 p-2">Item 1</div>
  <div class="bg-green-500 p-2">Item 2</div>
  <div class="bg-blue-500 p-2">Item 3</div>
</div>

यहां:

• flex से flexbox layout लागू होगा।
• justify-between से items के बीच space evenly distribute होगा।
• items-center से items को vertically center किया जाएगा।

Example 2: Grid Layout

html
<div class="grid grid-cols-2 gap-4 p-4">
  <div class="bg-red-500 p-2">Item 1</div>
  <div class="bg-green-500 p-2">Item 2</div>
  <div class="bg-blue-500 p-2">Item 3</div>
  <div class="bg-yellow-500 p-2">Item 4</div>
</div>

यहां:

• 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

html
<button class="bg-blue-500 text-white p-2 hover:bg-blue-700">
  Hover Over Me
</button>

यहां, जब आप बटन के ऊपर hover करेंगे, तो उसका background color blue से dark blue (700) हो जाएगा।

---

6. Customizing Tailwind CSS (Tailwind CSS कस्टमाइजेशन)

Tailwind CSS को आप अपनी ज़रूरत के हिसाब से कस्टमाइज भी कर सकते हैं।

Example: Custom Colors and Fonts

tailwind.config.js में:

javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e40af',
        'custom-yellow': '#fbbf24',
      },
      fontFamily: {
        'custom-font': ['Roboto', 'sans-serif'],
      }
    }
  }
}

अब आप अपनी HTML में इस कस्टम color और font का उपयोग कर सकते हैं:

html
<div class="bg-custom-blue text-white p-4">
  यह एक कस्टम Blue Color Example है।
</div>

<p class="font-custom-font text-custom-yellow">
  यह कस्टम Yellow Font Example है।
</p>

---

7. Using Tailwind with HTML (HTML में Tailwind का उपयोग)

Tailwind CSS को HTML में यूज़ करना बहुत आसान है। बस आपको CSS class name को सही तरीके से लागू करना होता है। एक simple example:

html
<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <div class="max-w-sm mx-auto p-6 bg-white shadow-lg rounded-lg">
    <h1 class="text-2xl font-bold text-center text-blue-500">Tailwind CSS Example</h1>
    <p class="mt-4 text-gray-700">यह एक Tailwind CSS का उदाहरण है जिसमें हम utility classes का उपयोग कर रहे हैं।</p>
  </div>
</body>
</html>

---

Conclusion

Tailwind CSS एक शक्तिशाली और flexible framework है जो आपकी CSS को तेज़ी से लिखने में मदद करता है। इसके utility-first approach के कारण, आप सिर्फ classes का इस्तेमाल करके styling कर सकते हैं, और अधिक कस्टमाइज़ेशन के लिए Tailwind config file का उपयोग कर सकते हैं।

अधिक जानकारी और उदाहरणों के लिए, Tailwind CSS की आधिकारिक डॉक्युमेंटेशन का अध्ययन करें।