২.১: Tailwind CSS কনফিগারেশন
Tailwind CSS আমাদের প্রজেক্টে ইনস্টল আছে, কিন্তু আমরা এটিকে আমাদের প্রয়োজন অনুযায়ী কাস্টমাইজ করব। tailwind.config.js ফাইলটি খুলুন এবং নিচের কোড দিয়ে আপডেট করুন:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
primary: '#3490dc',
secondary: '#ffed4a',
danger: '#e3342f',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}এই কনফিগারেশনে আমরা:
contentঅপশনে আমাদের প্রজেক্টের সমস্ত ফাইল যেখানে Tailwind CSS ব্যবহার করা হবে তার পাথ দিয়েছিtheme.extend.colorsএ কাস্টম কালার যোগ করেছি যা আমরা আমাদের প্রজেক্টে ব্যবহার করতে পারবtheme.extend.fontFamilyএ ডিফল্ট ফন্ট হিসেবে Inter ফন্ট সেট করেছি
২.২: globals.css ফাইল আপডেট করা
এখন আমরা app/globals.css ফাইলটি আপডেট করব। এই ফাইলে আমরা গ্লোবাল CSS স্টাইল যোগ করব:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-gray-50 text-gray-900;
}
h1 {
@apply text-3xl font-bold mb-4;
}
h2 {
@apply text-2xl font-bold mb-3;
}
h3 {
@apply text-xl font-bold mb-2;
}
a {
@apply text-primary hover:underline;
}
}
@layer components {
.btn {
@apply px-4 py-2 rounded font-medium transition-colors;
}
.btn-primary {
@apply btn bg-primary text-white hover:bg-primary/90;
}
.btn-secondary {
@apply btn bg-secondary text-gray-900 hover:bg-secondary/90;
}
.container-custom {
@apply container mx-auto px-4 sm:px-6 lg:px-8;
}
}এই CSS ফাইলে আমরা:
- Tailwind CSS এর বেস, কম্পোনেন্টস এবং ইউটিলিটি ক্লাসগুলো ইম্পোর্ট করেছি
@layer baseএ বেসিক HTML এলিমেন্টগুলোর স্টাইল সেট করেছি@layer componentsএ কাস্টম কম্পোনেন্ট ক্লাস যেমন বাটন এবং কন্টেইনার তৈরি করেছি
২.৩: layout.tsx ফাইল আপডেট করা
এখন আমরা app/layout.tsx ফাইলটি আপডেট করব। এই ফাইলটি আমাদের অ্যাপ্লিকেশনের মূল লেআউট:
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
// Inter ফন্ট লোড করা
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'আমার Next.js ওয়েবসাইট',
description: 'Next.js দিয়ে তৈরি করা একটি সুন্দর ওয়েবসাইট',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="bn">
<body className={inter.className}>
{children}
</body>
</html>
)
}এই ফাইলে আমরা:
globals.cssফাইল ইম্পোর্ট করেছি- Google Fonts থেকে Inter ফন্ট লোড করেছি
- ওয়েবসাইটের মেটাডাটা সেট করেছি (টাইটেল এবং ডেসক্রিপশন)
- HTML এবং body এলিমেন্ট সেট করেছি, যেখানে
childrenপ্রপ দিয়ে পেজ কনটেন্ট রেন্ডার হবে