🌊
Styling & Optimization

Tailwind CSS with Next.js

Utility-First Styling
💡 Tailwind, EK, "PRE-MADE, STICKER, SET" hai — INSTEAD, of, KHUD, CSS, LIKHNE, ke, TUM, EXISTING, "UTILITY, CLASSES" (jaise, bg-blue-500) DIRECTLY, HTML, PAR, LAGATE, HO.

Tailwind, CSS, create-next-app, SETUP, ke, DAURAN, hi, DIRECTLY, INTEGRATE, kiya, ja, sakta hai — UTILITY, CLASSES, DIRECTLY, JSX, mein, USE, ki, ja, sakti, HAIN, SEPARATE, CSS, FILES, likhne, ki, ZAROORAT, ke, bina.

Tailwind, "PURGE" (production, build, mein) UNUSED, CSS, ko, AUTOMATICALLY, REMOVE, kar, deta hai — sirf, WOHI, utility, classes, ka, CSS, bundle, mein, jaata hai, JO, ACTUALLY, CODE, mein, USE, HUI, hain.

export default function Card() {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
      <h2 className="text-xl font-bold text-gray-900">Title</h2>
    </div>
  );
}
🌊
Tailwind, EK, "PRE-MADE, STICKER, SET" hai — INSTEAD, of, KHUD, CSS, LIKHNE, ke, TUM, EXISTING, "UTILITY, CLASSES" (jaise, bg-blue-500) DIRECTLY, HTML, PAR, LAGATE, HO.
1 / 2
⚡ Quick Recap
  • Tailwind = utility-first CSS, framework — classes, directly, JSX, mein
  • create-next-app, mein, hi, SETUP, kiya, ja, sakta, hai
  • Unused CSS, automatically, "purge" ho, jaata, hai, production, build, mein
Is page mein (2 subtopics)

Tailwind, ka, "Just-In-Time" (JIT) compiler, DEVELOPMENT, mein, hi, ACTUALLY, USED, classes, ko, SCAN, karके, CSS, generate, karta hai — INSTANT, build, times, aur, SMALLER, CSS, output, ke, liye.

💡Tip: JIT, mode, se, ARBITRARY, VALUES, bhi, POSSIBLE, HAIN — jaise, w-[137px], EK, SPECIFIC, VALUE, ke, liye, JO, DEFAULT, scale, mein, nahi, hai.

Tailwind, aur, CSS, Modules, EK, saath, USE, kiye, ja, sakte, HAIN — jaise, MOST, styling, ke, liye, Tailwind, aur, COMPLEX, ANIMATIONS, jaise, EDGE, CASES, ke, liye, CSS, Modules.