Tailwind CSS का Utility-First Approach
पहले से बने utility classes को सीधे HTML में लागू करें, tailwind.config.js में theme को customize करें और दोहराए गए patterns निकालने के लिए @apply का उपयोग करें।
Tailwind CSS का Utility-First Approach, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
यूटिलिटी-प्रथम CSS क्या है
टेलविंड CSS, प्रत्येक CSS गुण के लिए पहले से बनी यूटिलिटी क्लासें उपलब्ध कराता है। कस्टम CSS लिखने के बजाय, HTML में सीधे यूटिलिटी क्लासें जोड़कर शैलियों का संयोजन करें। एक क्लास = एक CSS घोषणा।
टेलविंड इंस्टॉल करना
टेलविंड इंस्टॉल करें और कॉन्फ़िगरेशन प्रारंभ करें। वाइट परियोजनाएँ टेलविंड वाइट प्लगइन या PostCSS प्लगइन का उपयोग करती हैं।
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# Or with Vite plugin:
npm install -D @tailwindcss/viteयूटिलिटी क्लासों का प्रयोग
केवल टेलविंड की यूटिलिटी क्लासों का उपयोग करके एक कार्ड बनाएँ। किसी कस्टम CSS फ़ाइल की आवश्यकता नहीं है।
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
<img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="text-gray-500 mt-2">Card description goes here.</p>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
Read More
</button>
</div>उत्तरदायी उपसर्ग
उत्तरदायी ब्रेकपॉइंट उपसर्ग जोड़ें। md: मध्यम और उससे बड़ी स्क्रीन पर लागू होता है। lg: बड़ी स्क्रीन पर लागू होता है। टेलविंड मोबाइल-प्रथम है।
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">अवस्था वैरिएंट
क्लास में अवस्था वाले वैरिएंट के उपसर्ग लगाएँ: hover:, focus:, active:, disabled:, dark:।
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">थीम कॉन्फ़िगर करना
tailwind.config.js में रंगों, रिक्ति, फ़ॉन्ट और ब्रेकपॉइंट को अनुकूलित करें। डिफ़ॉल्ट theme का विस्तार करें या उसके कुछ भागों को बदल दें।
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: { 500: '#6366f1', 600: '#4f46e5' }
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans]
}
}
}
}@apply — पैटर्न निकालना
यूटिलिटी क्लासों को पुनः उपयोग योग्य CSS नियम में संयोजित करने के लिए CSS फ़ाइलों में @apply का उपयोग करें। इसका सीमित उपयोग करें — अधिकांश स्थितियों में सीधे यूटिलिटी क्लासों को प्राथमिकता दी जाती है।
/* Only for highly repeated patterns */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-indigo-600 text-white rounded-md
hover:bg-indigo-700 transition-colors font-medium;
}
}अनुपयोगी CSS हटाना
टेलविंड हज़ारों यूटिलिटी क्लासें बनाता है। उत्पादन में, यह आपकी स्रोत फ़ाइलों को स्कैन करके उपयोग में न आने वाली प्रत्येक क्लास हटा देता है, जिससे बहुत छोटी CSS फ़ाइलें बनती हैं (अक्सर 10KB से कम)।
रिएक्ट/व्यू के साथ टेलविंड
रिएक्ट में, टकराव के बिना टेलविंड क्लासें सशर्त रूप से लागू करने के लिए cn() (clsx + twMerge) का उपयोग करें। व्यू में :class बाइंडिंग का उपयोग करें।
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...classes: string[]) { return twMerge(clsx(classes)); }
<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>टेलविंड IntelliSense
स्वतः पूर्णता, होवर करने पर क्लास नाम का पूर्वावलोकन और अज्ञात क्लासों की लिंट जाँच के लिए टेलविंड CSS IntelliSense VSCode एक्सटेंशन इंस्टॉल करें। इससे टेलविंड विकास का अनुभव काफ़ी बेहतर हो जाता है।
टेलविंड की आलोचना और समर्थन
आलोचक: HTML कई क्लासों से भरा हुआ और पढ़ने में कठिन हो जाता है। समर्थन में तर्क: आपको कभी CSS नहीं लिखना पड़ता, सभी शैलियाँ एक ही स्थान पर रहती हैं और कॉन्फ़िगरेशन के माध्यम से डिज़ाइन सिस्टम लागू होता है। टेलविंड आज़माने वाली अधिकांश टीमें लगातार अधिक उत्पादकता की सूचना देती हैं।
त्वरित जाँच
टेलविंड हज़ारों यूटिलिटी क्लासें बनाता है, फिर भी उत्पादन बंडल के आकार को कैसे संभालता है?
पुनरावलोकन: टेलविंड CSS
यूटिलिटी-प्रथम: एक क्लास = एक CSS गुण। अधिकांश स्थितियों में कस्टम CSS की आवश्यकता नहीं। उत्तरदायी और अवस्था उपसर्ग (md:, hover:)। tailwind.config.js से अनुकूलित करें। दोहराए जाने वाले पैटर्न के लिए @apply। उत्पादन बिल्ड स्रोत को स्कैन करके अनुपयोगी क्लासें हटा देता है। रिएक्ट में सशर्त क्लासों के लिए cn() + twMerge का उपयोग करें। IntelliSense एक्सटेंशन इंस्टॉल करें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Tailwind CSS का Utility-First Approach” पाठ निःशुल्क है?
हाँ—“Tailwind CSS का Utility-First Approach” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Tailwind CSS का Utility-First Approach” में मैं क्या सीखूँगा?
पहले से बने utility classes को सीधे HTML में लागू करें, tailwind.config.js में theme को customize करें और दोहराए गए patterns निकालने के लिए @apply का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Tailwind CSS का Utility-First Approach” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- BEM Methodology: Block, Element, Modifier
- CSS Modules: Scoped Class Names
- CSS-in-JS: Styled-components और Emotion
- Tailwind CSS का Utility-First Approach