क्लास क्रमबद्ध करना और Prettier Plugin
यूटिलिटी क्लास को मानक क्रम में अपने-आप क्रमबद्ध करने के लिए prettier-plugin-tailwindcss इंस्टॉल करें, जिससे पठनीयता बढ़े और मर्ज टकराव कम हों।
क्लास क्रमबद्ध करना और Prettier Plugin, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
क्लास का क्रम क्यों महत्वपूर्ण है
जब कई Tailwind डेवलपर एक ही प्रोजेक्ट पर काम करते हैं, तो अलग-अलग फ़ाइलों में यूटिलिटी क्लास अनिवार्य रूप से अलग क्रम में दिखाई देती हैं। क्लास का क्रम रेंडरिंग को बहुत कम प्रभावित करता है, लेकिन असंगत क्रम code reviews को शोरपूर्ण और diff आउटपुट को पढ़ना कठिन बना देता है। एक सुसंगत canonical क्रम सभी को एक नज़र में कंपोनेंट की संरचना समझने में मदद करता है।
prettier-plugin-tailwindcss का परिचय
prettier-plugin-tailwindcss Tailwind टीम द्वारा बनाए रखा गया आधिकारिक Tailwind CSS Prettier प्लगइन है। हर बार जब Prettier किसी फ़ाइल को फ़ॉर्मैट करता है, यह आपके markup में यूटिलिटी क्लास को अपने-आप canonical क्रम में लगा देता है। किसी मैन्युअल प्रयास की आवश्यकता नहीं होती—बस फ़ाइल सेव करें और क्लास अपने-आप व्यवस्थित हो जाती हैं।
npm install -D prettier prettier-plugin-tailwindcssप्लगइन को कॉन्फ़िगर करना
इंस्टॉलेशन के बाद, प्लगइन को अपनी Prettier configuration फ़ाइल में जोड़ें। अधिकांश प्रोजेक्ट में प्लगइन बिना किसी अतिरिक्त विकल्प के अपने-आप काम करता है। यदि आपकी tailwind.config.js सामान्य स्थान पर नहीं है, तो tailwindConfig विकल्प से Prettier को उसका स्थान बताएँ।
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}Canonical क्रमबद्धता क्रम
प्लगइन Tailwind के सुझाए गए क्रम का पालन करते हुए क्लास को क्रमबद्ध करता है: पहले लेआउट यूटिलिटीज़ (display, position, overflow), फिर बॉक्स मॉडल (width, height, padding, margin), उसके बाद टाइपोग्राफ़ी, फिर दृश्य प्रॉपर्टीज़ (background, border, shadow), और अंत में इंटरैक्टिव अवस्थाएँ तथा responsive variants। यह दर्शाता है कि CSS specificity कैसे cascade होती है।
<!-- BEFORE sorting -->
<div class="text-white hover:bg-blue-700 p-4 rounded-lg bg-blue-500 flex items-center gap-2">
<!-- AFTER prettier-plugin-tailwindcss sorts -->
<div class="flex items-center gap-2 rounded-lg bg-blue-500 p-4 text-white hover:bg-blue-700">अपने प्रोजेक्ट पर Prettier चलाना
कॉन्फ़िगर करने के बाद, सभी टेम्पलेट फ़ाइलों पर Prettier चलाकर बड़े स्तर पर क्रम लागू करें। आसान उपयोग के लिए अपने package.json में format स्क्रिप्ट जोड़ें। डेवलपर्स को हर कमिट से पहले इसे चलाना चाहिए, या इससे भी बेहतर, इसे Husky के साथ प्री-कमिट हुक में जोड़ देना चाहिए।
// package.json
{
"scripts": {
"format": "prettier --write \"src/**/*.{html,jsx,tsx,vue}\"",
"format:check": "prettier --check \"src/**/*.{html,jsx,tsx,vue}\""
}
}एडिटर एकीकरण
डेवलपर अनुभव को बेहतर बनाने के लिए अपने एडिटर को सेव करते समय फ़ॉर्मैट करने के लिए कॉन्फ़िगर करें। VS Code में Prettier एक्सटेंशन इंस्टॉल करें और अपनी सेटिंग्स में editor.formatOnSave: true सेट करें। इसका अर्थ है कि फ़ाइल सेव करते ही classes अपने-आप क्रमबद्ध हो जाती हैं, जिससे बिना किसी अतिरिक्त चरण के आपका मार्कअप व्यवस्थित रहता है।
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}Husky के साथ प्री-कमिट हुक
Husky और lint-staged के साथ कमिट के समय फ़ॉर्मैटिंग को स्वचालित करने से यह सुनिश्चित होता है कि बिना क्रम वाली classes रिपॉज़िटरी में प्रवेश न करें। जब कोई डेवलपर कमिट करता है, तो केवल स्टेज की गई फ़ाइलों को फ़ॉर्मैट करके फिर से स्टेज किया जाता है—बड़े प्रोजेक्ट में भी यह तेज़ और केंद्रित प्रक्रिया रहती है।
npm install -D husky lint-staged
npx husky init
// package.json
{
"lint-staged": {
"*.{html,jsx,tsx,vue}": "prettier --write"
}
}JSX और TSX फ़ाइलों में क्रमबद्ध करना
यह प्लगइन JSX और TSX फ़ाइलों को भी संभालता है। यह className attributes और clsx तथा tailwind-merge जैसी उपयोगिताओं के स्ट्रिंग arguments के भीतर classes को क्रमबद्ध करता है। यह class strings खोजने के लिए स्थैतिक विश्लेषण का उपयोग करता है, इसलिए गतिशील रूप से बनाई गई strings अपरिवर्तित रहती हैं—केवल स्थैतिक string literals क्रमबद्ध किए जाते हैं।
// Before
const Button = () => (
<button className="font-semibold text-white hover:bg-blue-700 rounded bg-blue-500 px-4 py-2">
Click me
</button>
);
// After sorting
const Button = () => (
<button className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-700">
Click me
</button>
);टेम्पलेट लिटरल और clsx में क्रमबद्ध करना
यह प्लगइन string arguments के साथ कॉल किए जाने पर clsx, cn और tailwind-merge जैसे लोकप्रिय सहायकों को दी गई class strings को पहचानता है। इसका अर्थ है कि कई arguments में फैला होने पर भी आपकी सशर्त class logic क्रमबद्ध रहती है, जिससे composition patterns साफ़ और पठनीय बने रहते हैं।
import { clsx } from 'clsx';
// The plugin sorts string arguments inside clsx calls
const classes = clsx(
'rounded bg-blue-500 px-4 py-2 text-white',
isActive && 'ring-2 ring-blue-300',
isDisabled && 'cursor-not-allowed opacity-50'
);Prettier जाँच के साथ CI प्रवर्तन
जब फ़ाइलों में बिना क्रम वाली classes हों, तब बिल्ड विफल करने के लिए अपनी CI pipeline में Prettier का --check मोड जोड़ें। इससे यह सुनिश्चित होता है कि कोई डेवलपर प्री-कमिट हुक छोड़ भी दे, तब भी बिना क्रम वाला कोड main में मर्ज न हो। फ़ॉर्मैटिंग में अंतर मिलने पर जाँच गैर-शून्य स्थिति कोड के साथ समाप्त होती है।
# .github/workflows/ci.yml
jobs:
format-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci
- run: npm run format:checkविशेष मामलों और कस्टम classes को संभालना
यह प्लगइन ज्ञात Tailwind classes को क्रमबद्ध करता है, लेकिन अनपहचाने class names को अंत में उनके स्थान पर ही छोड़ देता है। यदि आप प्लगइनों के माध्यम से जोड़ी गई कस्टम उपयोगिताओं का उपयोग करते हैं, तो tailwindConfig विकल्प कॉन्फ़िगर करें, ताकि प्लगइन उनसे परिचित हो। जिन कस्टम classes की पहचान प्लगइन नहीं कर पाता, वे दिखाई देती रहेंगी, लेकिन पहचानी गई उपयोगिताओं के क्रम को नहीं बिगाड़ेंगी।
// .prettierrc — point to config so custom utilities are recognized
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "./tailwind.config.js"
}
// tailwind.config.js — custom utility plugin
plugins: [
plugin(({ addUtilities }) => {
addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px 4px rgba(0,0,0,0.5)' } });
}),
],त्वरित जाँच
इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: classes को स्वचालित रूप से क्रमबद्ध करने के लिए prettier-plugin-tailwindcss इंस्टॉल और कॉन्फ़िगर करना, सहज कार्यप्रवाह के लिए सेव करते समय एडिटर फ़ॉर्मैटिंग को एकीकृत करना, और Prettier के check मोड से CI में क्रमबद्ध classes लागू करना। अब हम ESLint के साथ Tailwind की लिंटिंग देखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “क्लास क्रमबद्ध करना और Prettier Plugin” पाठ निःशुल्क है?
हाँ—“क्लास क्रमबद्ध करना और Prettier Plugin” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“क्लास क्रमबद्ध करना और Prettier Plugin” में मैं क्या सीखूँगा?
यूटिलिटी क्लास को मानक क्रम में अपने-आप क्रमबद्ध करने के लिए prettier-plugin-tailwindcss इंस्टॉल करें, जिससे पठनीयता बढ़े और मर्ज टकराव कम हों। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“क्लास क्रमबद्ध करना और Prettier Plugin” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- अपने CSS आउटपुट का परीक्षण
- क्लास क्रमबद्ध करना और Prettier Plugin
- ESLint से Tailwind की लिंटिंग
- टीम परंपराएँ और स्टाइल गाइड