Tailwind CSSBeginner

Tailwind CSS with Next.js

Next.js প্রজেক্টে Tailwind CSS কীভাবে setup করবেন — App Router সহ modern Next.js conventions।

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

Next.js v13+ থেকে Tailwind CSS built-in support সহ আসে। নতুন Next.js project তৈরি করলেই Tailwind configure হয়ে থাকে।

নতুন Next.js Project তৈরি

Terminalbash

bash

npx create-next-app@latest my-app
# Tailwind বাছাই করুন: Yes

create-next-app interactive prompt-এ “Would you like to use Tailwind CSS?” — Yes বাছাই করলেই setup হয়ে যায়।

Manual Setup (যদি already project থাকে)

Terminalbash

bash

npm install tailwindcss @tailwindcss/postcss

postcss.config.mjsjavascript

javascript

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

src/app/globals.csscss

css

@import "tailwindcss";

App Router-এ ব্যবহার

src/app/page.tsxtsx

tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello Tailwind!
      </h1>
    </main>
  );
}

Next.js + Tailwind v4

Next.js 15+ এ Tailwind v4 built-in support দেয়। create-next-app@latest দিয়ে তৈরি করলে Tailwind v4 automatically setup হবে।

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

Tailwind CSSBeginner

Tailwind CSS with Next.js

Next.js প্রজেক্টে Tailwind CSS কীভাবে setup করবেন — App Router সহ modern Next.js conventions।

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

Next.js v13+ থেকে Tailwind CSS built-in support সহ আসে। নতুন Next.js project তৈরি করলেই Tailwind configure হয়ে থাকে।

নতুন Next.js Project তৈরি

Terminalbash

bash

npx create-next-app@latest my-app
# Tailwind বাছাই করুন: Yes

create-next-app interactive prompt-এ “Would you like to use Tailwind CSS?” — Yes বাছাই করলেই setup হয়ে যায়।

Manual Setup (যদি already project থাকে)

Terminalbash

bash

npm install tailwindcss @tailwindcss/postcss

postcss.config.mjsjavascript

javascript

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

src/app/globals.csscss

css

@import "tailwindcss";

App Router-এ ব্যবহার

src/app/page.tsxtsx

tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello Tailwind!
      </h1>
    </main>
  );
}

Next.js + Tailwind v4

Next.js 15+ এ Tailwind v4 built-in support দেয়। create-next-app@latest দিয়ে তৈরি করলে Tailwind v4 automatically setup হবে।

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