Tailwind CSS Academy · पाठ

Tailwind इंस्टॉल और कॉन्फ़िगर करना

CDN के माध्यम से और CLI के साथ npm के माध्यम से Tailwind CSS सेट अप करें, और देखें कि आपका पहला स्टाइल किया हुआ HTML पृष्ठ कैसे जीवंत होता है।

पाठ 2, कुल 4 में से13 चरण

Tailwind इंस्टॉल और कॉन्फ़िगर करना, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Tailwind जोड़ने के दो तरीके

Tailwind जोड़ने के दो तरीके हैं: तेज़ प्रोटोटाइप बनाने के लिए CDN स्क्रिप्ट टैग, या प्रोडक्शन के लिए npm CLI, जो एक छोटी, अनुकूलित CSS फ़ाइल बनाता है।

<!-- CDN approach (prototyping only) -->
<script src="https://cdn.tailwindcss.com"></script>

npm के ज़रिए Tailwind इंस्टॉल करना

प्रोडक्शन के लिए npm के ज़रिए tailwindcss, postcss और autoprefixer इंस्टॉल करें। फिर npx tailwindcss init -p चलाएँ, जिससे दोनों कॉन्फ़िगरेशन फ़ाइलें एक साथ बन जाएँगी।

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js फ़ाइल

tailwind.config.js फ़ाइल में शुरुआत में सेट करने के लिए एक महत्वपूर्ण फ़ील्ड होती है: content। Tailwind क्लास का उपयोग करने वाली हर फ़ाइल की सूची दें, वरना बिल्ड के दौरान वे क्लास शामिल नहीं की जाएँगी।

// tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

PostCSS कॉन्फ़िगरेशन फ़ाइल

Tailwind एक PostCSS प्लगइन के रूप में चलता है। postcss.config.js फ़ाइल आपके बंडलर को इसे चलाने के लिए बताती है। ज़्यादातर टूल इसे अपने-आप ढूँढ़ लेते हैं—इसके बाद आपको इसे शायद ही कभी छूना पड़ता है।

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

अपनी मुख्य CSS फ़ाइल बनाना

एक CSS एंट्री फ़ाइल बनाएँ और तीन @tailwind निर्देश जोड़ें: base, components और utilities। बिल्ड के समय ये Tailwind द्वारा बनाई गई स्टाइल में विस्तृत हो जाते हैं।

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CLI चलाना

Tailwind CLI आपकी फ़ाइलों पर नज़र रखता है और सेव करने पर उन्हें फिर से बनाता है। --input और --output को अपनी फ़ाइलों पर सेट करें, विकास के लिए --watch और प्रोडक्शन के लिए --minify जोड़ें।

# Development (with watch)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production (minified)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

HTML में CSS जोड़ना

अब बनाई गई CSS को किसी भी स्टाइलशीट की तरह अपने HTML में लिंक करें। href को इनपुट फ़ाइल के बजाय आउटपुट फ़ाइल पर रखें, फिर हर यूटिलिटी क्लास काम करने लगेगी।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./dist/output.css" rel="stylesheet" />
  <title>My Tailwind Site</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind!</h1>
</body>
</html>

Vite के साथ Tailwind

Vite का उपयोग कर रहे हैं? Tailwind, PostCSS के ज़रिए जुड़ता है। कॉन्फ़िगरेशन सेट करें, अपनी CSS को main.js में इम्पोर्ट करें और Vite बाकी काम तुरंत हॉट रीलोडिंग के साथ संभाल लेगा।

// main.js (Vite entry point)
import './src/input.css';

// Then run:
npm run dev

Create React App के साथ Tailwind

Create React App में पैकेज इंस्टॉल करें, कॉन्फ़िगरेशन शुरू करें और निर्देशों वाली index.css को इम्पोर्ट करें। CRA पहले से PostCSS चलाता है, इसलिए सर्वर को बस दोबारा शुरू करें।

# 1. Install dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 2. Add directives to src/index.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 3. Start dev server
npm start

Tailwind Preflight: CSS रीसेट

@tailwind base पंक्ति Preflight नाम का एक हल्का रीसेट जोड़ती है। यह डिफ़ॉल्ट मार्जिन हटाती है, हर जगह box-sizing सेट करती है और आपको एक साफ़, सुसंगत आधार देती है।

/* Preflight effects (auto-applied): */
/* - All elements: box-sizing: border-box */
/* - Body: margin: 0 */
/* - h1-h6: font-size/weight reset to body defaults */
/* - ul/ol: list-style: none; margin: 0; padding: 0 */

इंस्टॉलेशन की जाँच करना

यह जाँचने के लिए कि सब कुछ काम कर रहा है, किसी शीर्षक में text-3xl font-bold text-indigo-600 जोड़ें। बड़ा, गाढ़ा और इंडिगो रंग का टेक्स्ट दिख रहा है? आपका सेटअप तैयार है। अगर नहीं, तो कॉन्फ़िगरेशन में content पथ जाँचें।

<!-- Verification test -->
<h1 class="text-3xl font-bold text-indigo-600">
  If this is big, bold, and purple — Tailwind is working!
</h1>

त्वरित जाँच

त्वरित जाँच! सुनिश्चित करें कि सेटअप सही तरह से हो गया है। 🛠️

इंटरैक्टिव पाठ में इसका उत्तर दें

पाठ का पुनरावलोकन

बहुत बढ़िया! Tailwind को CDN या npm के ज़रिए जोड़ें, क्लास को शामिल करने के लिए content पथ सेट करें और तीन @tailwind निर्देश जोड़ें। अब अपना पहला पेज बनाएँगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Tailwind इंस्टॉल और कॉन्फ़िगर करना” पाठ निःशुल्क है?

हाँ—“Tailwind इंस्टॉल और कॉन्फ़िगर करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Tailwind इंस्टॉल और कॉन्फ़िगर करना” में मैं क्या सीखूँगा?

CDN के माध्यम से और CLI के साथ npm के माध्यम से Tailwind CSS सेट अप करें, और देखें कि आपका पहला स्टाइल किया हुआ HTML पृष्ठ कैसे जीवंत होता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Tailwind इंस्टॉल और कॉन्फ़िगर करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Tailwind CSS Academy पर वापस जाएँ