टेलविंड सीएसएस के साथ Next.js सेट करने के लिए, इन चरणों का पालन करें:

चरण 1: एक नया Next.js प्रोजेक्ट बनाएं

यदि आपने पहले से Next.js प्रोजेक्ट नहीं बनाया है, तो आप create-next-app का उपयोग करके एक प्रोजेक्ट बना सकते हैं।

npx create-next-app@latest my-next-app
cd my-next-app

चरण 2: टेलविंड सीएसएस स्थापित करें

अपने Next.js प्रोजेक्ट के अंदर, अपनी आवश्यक निर्भरताओं के साथ टेलविंड सीएसएस स्थापित करें।

npm install -D tailwindcss postcss autoprefixer

चरण 3: टेलविंड सीएसएस आरंभ करें

tailwind.config.js और postcss.config.js फ़ाइलें जनरेट करके टेलविंड CSS आरंभ करें।

npx tailwindcss init -p

यह आपके प्रोजेक्ट के रूट में टेलविंड.कॉन्फिग.जेएस और पोस्टसीएसएस.कॉन्फिग.जेएस फाइलें बनाएगा।

चरण 4: टेलविंड.कॉन्फिग.जेएस कॉन्फ़िगर करें

प्रासंगिक फाइलों में टेलविंड को सक्षम करने के लिए टेलविंड.कॉन्फिग.जेएस की सामग्री को निम्नलिखित कॉन्फ़िगरेशन से बदलें:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

चरण 5: अपनी सीएसएस फ़ाइलों में टेलविंड सीएसएस जोड़ें

अपने प्रोजेक्ट में, ./styles/globals.css फ़ाइल खोलें या बनाएं और टेलविंड के आधार, घटकों और उपयोगिताओं को आयात करने के लिए निम्नलिखित पंक्तियाँ जोड़ें:

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

चरण 6: डेवलपमेंट सर्वर चलाएँ

अब, टेलविंड सीएसएस को क्रियाशील देखने के लिए विकास सर्वर प्रारंभ करें:

npm run dev

आपका Next.js प्रोजेक्ट अब टेलविंड सीएसएस के साथ स्थापित होना चाहिए। आप अपने घटकों को स्टाइल करने के लिए टेलविंड उपयोगिता कक्षाओं का उपयोग कर सकते हैं।

उदाहरण उपयोग

यहां नेक्स्ट.जेएस पेज (पेज/इंडेक्स.जेएस) में टेलविंड सीएसएस का उपयोग करने का एक उदाहरण दिया गया है:

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

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