🎨 Styling, Images और Fonts · Lesson 16
Next.js में Tailwind CSS
Tailwind CSS क्या है?
Tailwind एक utility-first CSS framework है। अलग file में CSS rules लिखने की जगह आप JSX में ही छोटी classes जोड़ते हैं: p-4 = padding 1rem, text-center, bg-white। Next.js projects में यह सबसे popular styling choice है।
Traditional CSS
- Class name सोचो (.course-card)
- CSS file पर जाओ
- 8 properties लिखो
- वापस आओ
Tailwind
- JSX में classes लिखो
- Result तुरंत देखो
- Naming नहीं, switching नहीं
- Unused CSS अपने आप हटती है
Next.js में setup
Terminal
# Option A: choose "Yes" for Tailwind when creating the app npx create-next-app@latest my-app # Option B: add to an existing project npm install tailwindcss @tailwindcss/postcss postcss
JS – postcss.config.mjs
// postcss.config.mjs
export default {
plugins: { '@tailwindcss/postcss': {} },
}CSS – app/globals.css
/* app/globals.css */ @import "tailwindcss";
Check करें कि app/layout.jsx में ./globals.css import है। npm run dev restart करें और Tailwind classes हर जगह चलेंगी।
मुख्य utility classes
| ज़रूरत | Class | बनने वाली CSS |
|---|---|---|
| Padding / margin | p-4, px-6, mt-3, mx-auto | padding:1rem; margin-top:.75rem… |
| Text | text-lg, font-bold, text-slate-500 | font-size, font-weight, color |
| Background | bg-white, bg-indigo-600 | background-color |
| Border & radius | border, border-slate-200, rounded-2xl | border, border-radius:1rem |
| Flexbox | flex, items-center, justify-between, gap-4 | display:flex … |
| Grid | grid, grid-cols-3, gap-5 | display:grid; grid-template-columns |
| Size | w-full, max-w-xl, h-12 | width / max-width / height |
| Shadow | shadow-sm, shadow-lg | box-shadow |
Spacing scale: 1 unit = 0.25rem (4px)। यानी p-4 = 16px, p-6 = 24px।
Example: course card
JSX – components/CourseCardTw.jsx
// components/CourseCardTw.jsx
import Link from 'next/link'
export default function CourseCardTw({ course }) {
return (
<Link href={`/courses/${course.slug}`}
className="block rounded-2xl border border-slate-200 bg-white p-5 shadow-sm
transition hover:-translate-y-1 hover:shadow-lg">
<span className="rounded-full bg-indigo-50 px-3 py-1 text-xs font-bold text-indigo-700">
{course.level}
</span>
<h3 className="mt-3 text-lg font-bold text-slate-900">{course.title}</h3>
<p className="mt-1 text-sm text-slate-500">{course.summary}</p>
<div className="mt-4 flex items-center justify-between">
<span className="text-xl font-extrabold text-indigo-600">₹{course.fee}</span>
<span className="text-sm font-semibold text-indigo-600">View →</span>
</div>
</Link>
)
}Responsive design: sm: md: lg:
Tailwind mobile-first है: बिना prefix वाली class हर size पर लागू होती है; md: 768px और ऊपर लागू होती है।
JSX – responsive grid और hero
// 1 column on phones, 2 on tablets (md ≥ 768px), 3 on laptops (lg ≥ 1024px)
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
{courses.map((c) => <CourseCardTw key={c.slug} course={c} />)}
</div>
// Hero: text stacks on mobile, side-by-side on desktop
<section className="flex flex-col gap-8 py-12 md:flex-row md:items-center">
<h1 className="text-3xl font-black md:text-5xl">Learn coding in Hindi</h1>
</section>hover:, focus: और dark:
JSX – state variants
<button className="rounded-full bg-indigo-600 px-6 py-3 font-bold text-white
hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300
disabled:opacity-50">
Enroll now
</button>
<input className="w-full rounded-xl border border-slate-300 px-4 py-3
focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200" />
<div className="bg-white text-slate-900 dark:bg-slate-900 dark:text-white">…</div>@theme से custom colours
CSS – brand colours
/* app/globals.css */
@import "tailwindcss";
@theme {
--color-brand: #4f46e5;
--color-brand-dark: #3730a3;
--font-display: "Inter", sans-serif;
}
/* now you can write: bg-brand text-brand-dark font-display */Tailwind vs CSS Modules
Tailwind
- बहुत तेज़ build
- Consistent spacing/colours
- लंबी class strings
CSS Modules
- साफ़ JSX
- पूरी CSS power
- ज़्यादा files और naming
आम गलतियाँ
`bg-${color}-500`जैसे dynamic class names → Tailwind इन्हें detect नहीं कर पाता; पूरे नाम लिखें (color === 'red' ? 'bg-red-500' : 'bg-blue-500')।@import "tailwindcss"line भूलना → कोई style नहीं दिखता।sm:को "सिर्फ़ छोटी screens" समझना → इसका मतलब "640px और ऊपर" है।
सारांश
tailwindcss @tailwindcss/postcssinstall, PostCSS config और@import "tailwindcss"।- Spacing, colour, flex, grid के utilities; mobile-first breakpoints
md: lg:। - Variants
hover: focus: dark:;@themeसे brand colours।
✅ Practice
Course grid को Tailwind से दोबारा बनाइए: mobile पर 1 column, desktop पर 3, hover पर उठते cards, और focus ring वाला "Enroll" button।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या Tailwind CSS file को बहुत बड़ा कर देता है?
नहीं। Tailwind आपकी files scan करके सिर्फ़ इस्तेमाल हुई classes बनाता है, इसलिए production CSS आमतौर पर कुछ kilobytes की होती है।
क्या Tailwind v4 में tailwind.config.js चाहिए?
नहीं। Tailwind v4 CSS में @import "tailwindcss" और optional @theme block से configure होता है। Config file सिर्फ़ advanced plugins के लिए चाहिए।
क्या Tailwind और CSS Modules साथ use कर सकते हैं?
हाँ। कई projects layout और spacing के लिए Tailwind और किसी complex animation के लिए module file use करते हैं।
