Next.jsBeginner

Styling (Tailwind / CSS)

Next.js-এ Tailwind CSS ও CSS Modules দিয়ে styling — আধুনিক approach বাংলায়।

14টি অংশবাংলা ভাষায়

create-next-app করলেই Tailwind CSS ready। App Router-এ styling-এর چندটি পদ্ধতি আছে।

Global CSS

app/globals.csscss

css

@import "tailwindcss";

globals.css app/layout.tsx-এ import করা হয় এবং পুরো অ্যাপে প্রযোজ্য হয়।

Tailwind Class ব্যবহার

app/page.tsxtsx

tsx

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600 dark:text-blue-400">
        Hello Next.js
      </h1>
    </main>
  );
}

CSS Modules

*.module.css দিয়ে component-scoped CSS করা যায় — class name conflict হয় না।

app/ui/card.module.csscss

css

.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

app/ui/card.tsxtsx

tsx

import styles from "./card.module.css";

export default function Card({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className={styles.card}>{children}</div>;
}

className Merging

শর্তসাপেক্ষ class যোগ করতে `clsx` বা `tailwind-merge`-এর মতো library ব্যবহার হয়।

app/ui/button.tsxtsx

tsx

import { clsx } from "clsx";

export default function Button({
  variant = "primary",
}: {
  variant?: "primary" | "ghost";
}) {
  return (
    <button
      className={clsx(
        "rounded-lg px-4 py-2 font-medium",
        variant === "primary" && "bg-blue-600 text-white",
        variant === "ghost" && "border border-blue-600 text-blue-600"
      )}
    >
      Button
    </button>
  );
}

Tailwind হল default

এই প্রজেক্ট (Tech Tutor) নিজেও Next.js + Tailwind দিয়ে তৈরি — Tailwind documentation-এ শেখা utility classes এখানেই দেখতে পাবেন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।