परिचय

टेलविंड सीएसएस एक लोकप्रिय उपयोगिता-प्रथम सीएसएस ढांचा है जो सीधे मार्कअप में शैलियों को लागू करने के लिए निम्न-स्तरीय उपयोगिता कक्षाएं प्रदान करता है, जिससे तेजी से विकास चक्र होता है।

दूसरी ओर, प्रीटियर एक व्यापक रूप से उपयोग किया जाने वाला कोड फ़ॉर्मेटर है जो यह सुनिश्चित करता है कि आपका कोड इसे पार्स करके और इसे अपने नियमों के साथ दोबारा प्रिंट करके लगातार फ़ॉर्मेट किया गया है। यह पूरे प्रोजेक्ट में एक समान कोड शैली बनाए रखने में मदद करता है, जिससे कोडबेस साफ-सुथरा और पढ़ने में आसान हो जाता है।

टेलविंड सीएसएस का उपयोग करते समय एक आम चुनौती उपयोगिता वर्गों के क्रम को प्रबंधित करना है, खासकर जब आपकी शैलियों और HTML की जटिलता बढ़ती है। इन कक्षाओं को मैन्युअल रूप से क्रमबद्ध करना कठिन और त्रुटि-प्रवण हो सकता है। यहीं पर स्वचालित क्लास सॉर्टिंग आती है। प्रीटियर जैसे टूल के साथ-साथ प्रीटियर-प्लगइन-टेलविंडसीएसएस जैसे प्लगइन्स का लाभ उठाकर, हम टेलविंड सीएसएस कक्षाओं की सॉर्टिंग को स्वचालित कर सकते हैं, एक सुसंगत क्रम सुनिश्चित कर सकते हैं और कक्षाओं की पठनीयता और रखरखाव में सुधार कर सकते हैं।

इस लेख का उद्देश्य नई और मौजूदा दोनों परियोजनाओं में प्रीटियर के साथ टेलविंड सीएसएस स्वचालित क्लास सॉर्टिंग स्थापित करने की प्रक्रिया के माध्यम से आपका मार्गदर्शन करना है। चाहे आप कोई नया प्रोजेक्ट शुरू कर रहे हों या किसी चालू प्रोजेक्ट में एकीकृत कर रहे हों, यह व्यापक मार्गदर्शिका आपको चरण-दर-चरण निर्देश प्रदान करेगी।

विषयसूची

• एक नए प्रोजेक्ट में टेलविंड सीएसएस और प्रीटियर की स्थापना
  • परियोजना प्रारंभ करना और टेलविंड सीएसएस स्थापित करना
  • प्रीटियर को स्थापित और कॉन्फ़िगर करें
• मौजूदा टेलविंड सीएसएस प्रोजेक्ट में सुंदर-प्लगइन-टेलविंडसीएसएस स्थापित करना
• निष्कर्ष

एक नए प्रोजेक्ट में टेलविंड सीएसएस और प्रीटियर की स्थापना

शुरू करने से पहले, सुनिश्चित करें कि आपने निम्नलिखित इंस्टॉल कर लिया है:

• Node.js
• एक पैकेज मैनेजर (हम इस परियोजना के लिए बन का उपयोग करेंगे, लेकिन यदि आप चाहें तो एनपीएम, यार्न, या पीएनपीएम का उपयोग कर सकते हैं)
• एक कोड संपादक (जैसे, वीएस कोड)

प्रोजेक्ट प्रारंभ करना और टेलविंड सीएसएस स्थापित करना

एक नया प्रोजेक्ट बनाकर शुरुआत करें। आपके पसंदीदा ढांचे या सेटअप के आधार पर विशिष्ट चरण भिन्न हो सकते हैं। विस्तृत निर्देशों के लिए टेलविंड सीएसएस इंस्टालेशन फ्रेमवर्क गाइड देखें। यदि आपने टेलविंड सीएसएस इंस्टॉलेशन चरणों को पहले ही पूरा कर लिया है, तो आप मौजूदा टेलविंड सीएसएस प्रोजेक्ट अनुभाग में प्रीटियर-प्लगइन-टेलविंडसीएसएस सेट अप करने के लिए आगे बढ़ सकते हैं। Vite का उपयोग करके इसे कैसे करें यहां बताया गया है:

bun create vite my-app --template react-ts
cd my-app
bun install

अब टेलविंड सीएसएस स्थापित और कॉन्फ़िगर करें

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

आपको एक टेलविंड सीएसएस कॉन्फिग फ़ाइल दिखनी चाहिए: टेलविंड.कॉन्फिग.जेएस, इसमें निम्नलिखित सामग्री कॉपी करें।

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

अपनी सीएसएस फ़ाइल के शीर्ष पर निम्नलिखित टेलविंड निर्देश जोड़ें (उदाहरण के लिए, src/index.css):

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

प्रीटियर को स्थापित और कॉन्फ़िगर करें

bun install -D prettier prettier-plugin-tailwindcss

अपने प्रोजेक्ट के रूट में एक सुंदर कॉन्फ़िगरेशन फ़ाइल बनाएं और कॉन्फ़िगरेशन फ़ाइल में प्रीटियर-प्लगइन-टेलविंडसीएसएस प्लगइन जोड़ें, हम .prettierrc का उपयोग करेंगे, आप यहां अन्य स्वीकार्य प्रीटियर कॉन्फ़िगरेशन फ़ाइल प्रकार देख सकते हैं

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

अब सेटअप का परीक्षण करें, src/App.tsx फ़ाइल को संशोधित करें और इसे सहेजें।

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

परिणाम:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

मौजूदा टेलविंड सीएसएस प्रोजेक्ट में प्रीटियर-प्लगइन-टेलविंडसीएसएस की स्थापना

यदि आपके प्रोजेक्ट में पहले से ही प्रीटियर सेटअप है, तो प्रीटियर-प्लगइन-टेलविंडसीएसएस प्लगइन को एकीकृत करना सीधा है। आपको केवल प्लगइन इंस्टॉल करना होगा और उसे कॉन्फ़िगर करना होगा। यदि प्रीटियर अभी तक स्थापित नहीं है, तो आपको इसे प्लगइन के साथ सेट करना होगा।

मौजूदा सुंदर सेटअप वाली परियोजनाओं के लिए, चलाएँ:

bun add -D prettier-plugin-tailwindcss

ऐसी परियोजनाओं के लिए जिनमें कोई मौजूदा सुंदर सेटअप नहीं है, चलाएँ:

bun add -D prettier prettier-plugin-tailwindcss

प्लगइन को अपने मौजूदा प्रीटियर कॉन्फ़िगरेशन में जोड़ें। यदि कोई मौजूदा प्रीटियर कॉन्फ़िगरेशन नहीं है, तो अपने प्रोजेक्ट के रूट में एक .prettierrc फ़ाइल बनाएं। फिर निम्नलिखित जोड़ें:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

टेलविंड सीएसएस कक्षाओं के साथ फ़ाइल में परिवर्तन करके सुनिश्चित करें कि प्रीटियर सही ढंग से काम कर रहा है। फ़ाइल को सहेजें और जांचें कि टेलविंड सीएसएस कक्षाएं स्वचालित रूप से सॉर्ट की गई हैं या नहीं।

निष्कर्ष

नई और मौजूदा दोनों टेलविंड सीएसएस परियोजनाओं में प्रीटियर-प्लगइन-टेलविंडसीएसएस को एकीकृत करने से सुसंगत और संगठित वर्ग छँटाई सुनिश्चित करके आपके विकास वर्कफ़्लो में सुधार होता है। नई परियोजनाओं के लिए, आप अपने प्रारंभिक कॉन्फ़िगरेशन को सुव्यवस्थित करने के लिए प्रीटियर और प्लगइन को एक साथ सेट कर सकते हैं। मौजूदा परियोजनाओं के लिए, बस अपने मौजूदा प्रीटियर सेटअप में प्लगइन जोड़ें या यदि प्रीटियर अभी तक कॉन्फ़िगर नहीं किया गया है तो प्रीटियर और प्लगइन दोनों इंस्टॉल करें।

गैर-मानक विशेषताओं में कक्षाओं को क्रमबद्ध करने जैसे अतिरिक्त कॉन्फ़िगरेशन विकल्पों के लिए, प्रीटियर-प्लगइन-टेलविंडसीएसएस दस्तावेज़ पर जाएं।