3.🎨 Laravel-এ Tailwind CSS Setup (Vite সহ) + Layout Design → বাংলায় ধাপে ধাপে টিউটোরিয়াল

🔰 ধাপ ১: Tailwind CSS ইন্সটল করা (Vite সহ)

Laravel 9/10+ ভার্সনে Vite ডিফল্টভাবে থাকে। তাই আমরা নিচের মতো করে Tailwind CSS ইন্সটল করবো:

✅ টার্মিনালে নিচের কমান্ড চালাও:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

➡️ এতে দুটি ফাইল তৈরি হবে:

tailwind.config.js
postcss.config.js

🧩 ধাপ ২: Tailwind কনফিগার করা

🔹 `tailwind.config.js` ফাইলে নিচের মতো করে content সেট করো:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

এই content বলে Tailwind কে কোন কোন ফাইলে ক্লাস খুঁজতে হবে।

🎨 ধাপ ৩: Tailwind CSS ফাইল যুক্ত করা

🔹 `resources/css/app.css` ফাইলে নিচের ৩টি লাইনের কোড যোগ করো:

@tailwind base;
@tailwind components;
@tailwind utilities;

এই ফাইল Laravel Jetstream এর সময় অটোমেটিক তৈরি হয়ে যায়। যদি না থাকে তাহলে নিজে বানিয়ে নাও।

⚙️ ধাপ ৪: Vite Assets কম্পাইল করা

✅ টার্মিনালে লিখো:

npm run dev

➡️ এতে Tailwind CSS public/build ফোল্ডারে compiled হয়ে যাবে।

🔥 প্রোডাকশনের জন্য (live server এ) চালাতে হবে:

npm run build

🧱 ধাপ ৫: Blade Layout ফাইল তৈরি করা

✅ `resources/views/layouts/app.blade.php` ফাইল বানাও:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Ecommerce')</title>
    @vite('resources/css/app.css')
</head>
<body class="bg-gray-100 text-gray-900">

    <!-- Navbar -->
    <header class="bg-white shadow p-4">
        <div class="container mx-auto flex justify-between">
            <a href="/" class="text-xl font-bold">📦 ইকমার্স</a>
            <nav>
                <a href="/" class="px-4">হোম</a>
                <a href="/shop" class="px-4">দোকান</a>
                <a href="/login" class="px-4">লগইন</a>
            </nav>
        </div>
    </header>

    <!-- Content Area -->
    <main class="container mx-auto py-10">
        @yield('content')
    </main>

</body>
</html>

🧪 ধাপ ৬: Layout ব্যবহার করা

✅ `resources/views/welcome.blade.php` ফাইল এ নিচের মতো করো:

@extends('layouts.app')

@section('title', 'হোমপেজ')

@section('content')
    <h1 class="text-3xl font-bold text-center">আমাদের Laravel ইকমার্স ওয়েবসাইটে স্বাগতম!</h1>
    <p class="mt-4 text-center text-gray-600">এই পেইজটি Tailwind CSS দিয়ে ডিজাইন করা হয়েছে।</p>
@endsection

🎨 ধাপ ৭: Tailwind Global Customization (Color, Typography, Spacing)

✅ `tailwind.config.js` ফাইলে `theme.extend` এ নিজের কালার/ফন্ট যুক্ত করো:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#0f172a',
        accent: '#f43f5e',
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

তারপর তুমি ক্লাস ব্যবহার করতে পারো:

<div class="bg-primary text-white p-6">Primary Background</div>
<h1 class="font-sans text-accent">Accent Color</h1>
<div class="h-128 bg-gray-200">Custom Height</div>

📐 ধাপ ৮: Responsive Grid/Container System

Tailwind CSS দিয়ে সহজে গ্রিড এবং কন্টেইনার বানানো যায়।

✅ Responsive Container:

<div class="container mx-auto px-4">
    <h1 class="text-2xl font-bold">Welcome</h1>
</div>

✅ Responsive Grid Layout:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white shadow p-4">পণ্য ১</div>
    <div class="bg-white shadow p-4">পণ্য ২</div>
    <div class="bg-white shadow p-4">পণ্য ৩</div>
</div>

📌 শেষ কথা:

বিষয়	স্টেপ
Tailwind ইন্সটল	`npm install -D tailwindcss...`
config করা	`tailwind.config.js`
blade layout	`layouts/app.blade.php`
ভিউতে layout ব্যবহার	`@extends('layouts.app')`
asset রান	`npm run dev`
grid/spacing/font/color কাস্টম	`tailwind.config.js` এ extend

🔔 এখন চাইলে আমি তোমাকে দেখাতে পারি:

Hero সেকশন বানানো Tailwind দিয়ে
পণ্য কার্ড (Product Card) বানানো গ্রিডে
Dark mode এবং responsiveness
Header, Footer, Mobile NavBar

Articles

with jetstream

Laravel