PricingLoginStart free
Tailwind CSS Academy · पाठ

Next.js में Tailwind सेट अप करना

आधिकारिक गाइड का उपयोग करके Next.js प्रोजेक्ट में Tailwind इंस्टॉल करें, PostCSS कॉन्फ़िगर करें और App Router में स्टाइल सही ढंग से लोड होने की पुष्टि करें।

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

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

Next.js और Tailwind: सेटअप

Tailwind CSS में Next.js के लिए प्रथम-श्रेणी का समर्थन है। Next.js 13+ से शुरू करते हुए, create-next-app स्कैफ़ोल्डर में Tailwind सेटअप का विकल्प शामिल होता है, इसलिए आप एक ही कमांड से शुरुआत कर सकते हैं। यह एकीकरण बिल्ड के समय Tailwind को संसाधित करने के लिए PostCSS पर निर्भर करता है और केवल परियोजना में उपयोग की गई क्लासों वाली अनुकूलित CSS बंडल तैयार करता है। पूरी सेटअप प्रक्रिया समझने से आप मौजूदा परियोजनाओं में इसे मैन्युअली भी कॉन्फ़िगर कर सकेंगे।

# Create a new Next.js project with Tailwind
npx create-next-app@latest my-app \
  --typescript \
  --tailwind \
  --eslint \
  --app

cd my-app
npm run dev

Next.js में Tailwind की मैन्युअल स्थापना

मौजूदा Next.js परियोजना में Tailwind जोड़ने के लिए तीन पैकेज स्थापित करें: tailwindcss, postcss और autoprefixer। फिर npx tailwindcss init -p से कॉन्फ़िगरेशन फ़ाइलें बनाएँ, जिससे tailwind.config.js और postcss.config.js दोनों बनती हैं। PostCSS वह पाइपलाइन है जो आपकी CSS को रूपांतरित करती है — Next.js अपने-आप postcss.config.js का पता लगाकर बिल्ड के दौरान इसके प्लगइन लागू करता है।

# Install dependencies
npm install -D tailwindcss postcss autoprefixer

# Generate config files
npx tailwindcss init -p

# This creates:
# tailwind.config.js
# postcss.config.js

कंटेंट पथ कॉन्फ़िगर करना

सबसे महत्वपूर्ण कॉन्फ़िगरेशन चरण tailwind.config.js में content ऐरे सेट करना है। इससे Tailwind को पता चलता है कि क्लास नामों के लिए किन फ़ाइलों को स्कैन करना है, ताकि वह उत्पादन में अनुपयोगी शैलियाँ हटा सके। Next.js App Router परियोजना के लिए सभी app, pages, components और lib निर्देशिकाएँ शामिल करें। कोई पथ छूट जाने पर Tailwind उस निर्देशिका में उपयोग की गई क्लासों को हटा देगा — उत्पादन बिल्ड में शैलियाँ गायब होने का यह एक सामान्य कारण है।

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './lib/**/*.{js,ts,jsx,tsx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}'  // if using /src dir
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

ग्लोबल CSS प्रवेश बिंदु

एक globals.css फ़ाइल बनाएँ (आमतौर पर app/globals.css या styles/globals.css पर) और उसमें Tailwind के तीन निर्देश जोड़ें। इस फ़ाइल को अपने मूल लेआउट कॉम्पोनेंट में आयात करें — App Router के लिए app/layout.tsx में — ताकि पूरे अनुप्रयोग में Tailwind शैलियाँ उपलब्ध रहें। इसे कई बार आयात न करें; मूल स्तर पर एक आयात पर्याप्त है।

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom global styles go below */
@layer base {
  body {
    @apply bg-white text-gray-900 antialiased;
  }
}

/* app/layout.tsx */
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Next.js कॉम्पोनेंट में Tailwind का उपयोग

सेटअप पूरा होने के बाद, Tailwind की यूटिलिटी क्लासों का सीधे अपने JSX में उपयोग करें। Next.js में कॉम्पोनेंट Server Components (डिफ़ॉल्ट) या Client Components ('use client') हो सकते हैं। Tailwind क्लासें दोनों में एक समान काम करती हैं — वे शुद्ध HTML एट्रिब्यूट हैं जिन्हें PostCSS बिल्ड के समय संसाधित करता है। किसी भी कॉम्पोनेंट प्रकार में Tailwind क्लासें लागू करने की रनटाइम लागत नहीं होती।

// app/components/HeroSection.tsx
export default function HeroSection() {
  return (
    <section class="bg-gradient-to-br from-blue-600 to-indigo-700 py-24">
      <div class="max-w-4xl mx-auto px-6 text-center">
        <h1 class="text-5xl font-bold text-white mb-6">
          Build Faster with Tailwind
        </h1>
        <p class="text-xl text-blue-100 mb-8">
          Utility-first CSS for modern Next.js applications.
        </p>
        <a
          href="/get-started"
          class="bg-white text-blue-600 font-semibold px-8 py-3 rounded-full
                 hover:bg-blue-50 transition-colors"
        >
          Get Started
        </a>
      </div>
    </section>
  );
}

Next.js में थीम का विस्तार

tailwind.config.js में डिफ़ॉल्ट थीम को बढ़ाकर अपने Next.js प्रोजेक्ट के लिए Tailwind को अनुकूलित करें। सामान्य विस्तारों में ब्रांड के कस्टम रंग, Inter या Geist फ़ॉन्ट (जिसका उपयोग Next.js के डिफ़ॉल्ट टेम्पलेट में होता है) और कस्टम ब्रेकपॉइंट शामिल हैं। डिफ़ॉल्ट मानों को पूरी तरह बदलने के बजाय उनके साथ नए मान जोड़ने के लिए theme.extend का उपयोग करें।

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme');

module.exports = {
  content: ['./app/**/*.{tsx,ts}', './components/**/*.{tsx,ts}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', ...fontFamily.sans]
      },
      screens: {
        '3xl': '1920px'
      }
    }
  },
  plugins: []
}

Next.js लेआउट के साथ Tailwind

Next.js App Router के नेस्टेड लेआउट Tailwind के साथ सहज रूप से काम करते हैं। प्रत्येक लेआउट खंड अपनी संरचनात्मक क्लास लागू कर सकता है। एक सामान्य पैटर्न में रूट लेआउट पृष्ठ की पृष्ठभूमि और फ़ॉन्ट सेट करता है, डैशबोर्ड लेआउट साइडबार की फ्लेक्स संरचना जोड़ता है, और अलग-अलग पृष्ठ लेआउट max-w-* तथा पैडिंग जैसी सामग्री सीमाएँ प्रदान करते हैं।

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div class="flex h-screen bg-gray-50">
      {/* Sidebar */}
      <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0">
        <nav class="p-4">{/* nav links */}</nav>
      </aside>

      {/* Main content */}
      <main class="flex-1 overflow-auto">
        <div class="max-w-7xl mx-auto p-8">
          {children}
        </div>
      </main>
    </div>
  );
}

next/image के साथ Tailwind

next/image का उपयोग करते समय आकार और प्रस्तुति नियंत्रित करने के लिए Tailwind क्लास लागू करें। Image कॉम्पोनेंट के लिए स्पष्ट आयाम या fill प्रॉप में से किसी एक का होना आवश्यक है। fill का उपयोग करते समय पैरेंट का relative होना और उसके आयाम निर्धारित होना आवश्यक है — Tailwind की relative, w-full और h-64 यूटिलिटी इसके लिए बिल्कुल उपयुक्त हैं। सही इमेज क्रॉपिंग के लिए object-cover और object-center का उपयोग करें।

import Image from 'next/image';

export function CardImage({ src, alt }) {
  return (
    // Parent must be relative with defined dimensions
    <div class="relative h-48 w-full overflow-hidden rounded-t-xl">
      <Image
        src={src}
        alt={alt}
        fill
        class="object-cover object-center"
        sizes="(max-width: 768px) 100vw, 400px"
      />
    </div>
  );
}

TypeScript और Tailwind IntelliSense

अपने Next.js TypeScript प्रोजेक्ट में Tailwind क्लास के लिए स्वतः पूर्णता, लिंटिंग और हॉवर प्रीव्यू पाने हेतु Tailwind CSS IntelliSense VS Code एक्सटेंशन इंस्टॉल करें। यह एक्सटेंशन आपके tailwind.config.js को पढ़कर स्वतः पूर्णता मेनू में आपकी कस्टम थीम के मान दिखाता है। TypeScript कॉन्फ़िगरेशन का उपयोग करने वाले प्रोजेक्ट में कॉन्फ़िगरेशन का नाम बदलकर tailwind.config.ts करें और tailwindcss पैकेज से Config प्रकार का उपयोग करें।

// tailwind.config.ts — TypeScript config
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  },
  plugins: []
};

export default config;

सेटअप के सही ढंग से काम करने की पुष्टि

इंस्टॉलेशन के बाद एक त्वरित जाँच से अपने Tailwind सेटअप की पुष्टि करें। अपने होम पेज पर कोई स्पष्ट रूप से दिखाई देने वाली Tailwind क्लास — जैसे bg-red-500 text-white p-8 text-2xl — जोड़ें और डेवलपमेंट सर्वर चलाएँ। यदि स्टाइल लागू हो जाती हैं, तो आपका सेटअप सही है। यदि ऐसा नहीं होता, तो जाँचें कि आपका globals.css इम्पोर्ट रूट लेआउट में है, सामग्री पथ आपके संपादित किए गए फ़ाइल को शामिल करते हैं, और PostCSS चल रहा है (जिसे Next.js स्वचालित रूप से संभालता है)।

// app/page.tsx — quick verification
export default function HomePage() {
  return (
    <main class="min-h-screen bg-gray-50 flex items-center justify-center">
      <div class="bg-blue-600 text-white text-2xl font-bold px-8 py-6 rounded-2xl shadow-lg">
        Tailwind is working in Next.js!
      </div>
    </main>
  );
}

// Run: npm run dev
// Visit: http://localhost:3000
// You should see a blue rounded card

सेटअप की सामान्य गलतियों से बचें

Tailwind/Next.js सेटअप की सबसे आम समस्याएँ हैं: सामग्री पथ का न होना, जिसके कारण प्रोडक्शन में क्लास हट जाती हैं; globals.css को कई स्थानों पर इम्पोर्ट करना, जिससे स्टाइल दोहराई जाती हैं; और CSS फ़ाइल में @tailwind निर्देश भूल जाना। एक अन्य सामान्य गलती className (React) और class (HTML) में भ्रमित होना है — JSX कॉम्पोनेंट में Tailwind क्लास लागू करने के लिए हमेशा className का उपयोग करें।

// CORRECT in JSX/TSX
<div className="flex items-center gap-4 p-6">
  <span className="text-lg font-semibold text-gray-900">Hello</span>
</div>

// WRONG in JSX/TSX (use in plain HTML only)
<div class="flex items-center gap-4 p-6">
  <span class="text-lg font-semibold text-gray-900">Hello</span>
</div>

// Also check: globals.css must have all 3 directives
// @tailwind base;       ← resets and base styles
// @tailwind components; ← component layer
// @tailwind utilities;  ← all utility classes

त्वरित जाँच

इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।

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

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

इस पाठ में आपने सीखा: Next.js में Tailwind इंस्टॉल करने के लिए tailwindcss, postcss और autoprefixer आवश्यक हैं; content array यह नियंत्रित करता है कि प्रोडक्शन में हटाए जाने के बाद कौन-से क्लास नाम बने रहें; और तीन @tailwind निर्देशों वाली globals.css को रूट लेआउट में एक बार इम्पोर्ट करना आवश्यक है। आगे हम React में clsx और tailwind-merge की सहायता से सशर्त क्लास प्रबंधित करना सीखेंगे।

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

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

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

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

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

क्या “Next.js में Tailwind सेट अप करना” पाठ निःशुल्क है?

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

“Next.js में Tailwind सेट अप करना” में मैं क्या सीखूँगा?

आधिकारिक गाइड का उपयोग करके Next.js प्रोजेक्ट में Tailwind इंस्टॉल करें, PostCSS कॉन्फ़िगर करें और App Router में स्टाइल सही ढंग से लोड होने की पुष्टि करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

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

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

“Next.js में Tailwind सेट अप करना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. Next.js में Tailwind सेट अप करना
  2. React में सशर्त क्लास
  3. CVA के साथ कंपोनेंट वैरिएंट
  4. tailwind-merge से क्लास टकराव से बचना
← Tailwind CSS Academy पर वापस जाएँ